vue导入及使用本地图片

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文件（详情）。