记一次vue中图片加载的问题
用js动态加载assets或者本文件的图片出现404的状态码
404代码
<img :src="icon" alt="" />
data() {
return {
'icon': '../assets/img/1-2.png'
}
}
在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址
解决办法
- 将图片作为模块加载进去
data() {
return {
require('../assets/img/1-2.png')
}
}
- 将图片放到static目录下，但必须写成绝对路径
<img src="./static/img/1-2.png" alt="" />
