MSite.vue导入本地图片
图片所在位置:
在这里插入图片描述

1.直接使用

<template>
  <img src="./image/1.jpg"/>
</tempalte>

2.data里使用require

<template>
  <img :src="imgUrl">
</template>
<script>
export default {
  data() {
    return {
      imgUrl:require('./image/1.jpg')
    }
  }
}  
</script>

3.data使用import进来

<template>
  <img :src="imgUrl">
</template>
<script>
import img from './image/1.jpg'
export default {
  data() {
    return {
      imgUrl:img
    }
  }
}  
</script>

4.使用生命周期

<template>
  <img :src="imgUrl">
</template>
<script>
export default {
  data() {
    return {
      imgUrl:''
    }
  },
 created() {
    let urlImg = "pages/MSite/image/1.jpg"
    this.imgUrl = require("@/"+urlImg)
  }
}  
</script>

如果图片很少,我个人推荐使用方法二,感觉比较方便吧
如果图片大量的,可以使用方法二或三,把数据提取出来放在其他js文件(详情)

Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐