vue中data中引用本地图片报错404

首先说明vue-cli中assets和static两个文件的区别

1.assets在项目编译的过程中会被webpack处理理解为模块依赖，如果执行npm run dev或npm run build命令行，assets会被编译，导致路径发生变化，所以如果写成绝对路径，会存在问题

2.static在项目编译的过程中webpack不会被解析，他相当于是存放第三方文件的地方，路径可写成绝对路径

总结：assets中的文件路径会变，static中的文件路径不变

解决办法：

1.将图片放到static文件中  例 images:[{src:”/static/1.png”},{src:”/static/2.png”}]

2.将图片作为模块加载到页面，webpack就可以将其解析（require()）

在img的src中加入require

第一种用在a标签
<a :href="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">
第一种用在img
<img :src="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">

　　

转载于:https://www.cnblogs.com/gqx-html/p/10734462.html