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

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐