[JavaScript知识库]Vue项目中img的src动态加载问题

利用vue做轮播图的时候，我将一些图片存在本地assets文件，在data中直接写成下面这样：

imgList:['../assets/1.png','../assets/2.png''../assets/3.png']

运行代码时图片时无法正常显示的。

原因：webpack会将图片当模块使用。但是因为上面图片是动态加载的，所以url-loader无法解析图片路径，执行npm run dev或者npm run build之后导致路径没有被加工。

动态和非动态引入图片时浏览器中路径的区别：

imgPath='../assets/2.png'

<!-- 动态加载，url-loader无法解析路径地址，不会处理路径，图片显示失败-->
<!-- 浏览器对应DOM：<img data-v-e3565ce0="" src="../assets/2.png" class="img"> -->
	<img class="img" :src="imgPath" />

<!-- 非动态加载，webpack会自动对路径进行处理，图片显示成功 -->
<!-- 浏览器对应DOM：<img data-v-e3565ce0="" src="/static/img/2.b3117e2.png"> -->
      <img src='../assets/2.png' />

解决思路：将图片作为模块加载进去，这样webpack将能将它解析，或者将资源放在static目录下。

解决方法1：通过import导入。

<script>
import img1 from '../assets/1.png'
import img2 from '../assets/2.png'
import img3 from '../assets/3.png'

export default {
  data () {
    return {
      imgList: [
        img1, img2, img3
      ]
    }
  }
}
</script>

解决方法2:通过require。

<script>
export default {
  data () {
    return {
      imgList: [
        require('../assets/1.png'),
        require('../assets/2.png'),
        require('../assets/3.png')
      ]
    }
  }
}
</script>

解决方法3:将图片放到static目录下，写成绝对路径的形式。

 imgList: ['/static/1.png', '/static/2.png']

assets和static两个文件的区别：
assets：在项目编译的过程会被webpack处理解析为模块依赖,只支持相对路径的形式。
static：在static这个目录下文件不会被webpack处理和解析，webpack直接复制到最终的打包目录dist/static。必须使用绝对路径引用这些文件。