最近有些松懈，好久没有写博客了，今天写一下最近碰到的关于vue3的问题
vue中动态图片展示报404的问题
//body部分
<div v-for="(item,index) in imgArray" :key="index">
<img :src="item">
</div>
//js部分
let imgArray=["../../src/assets/images/1.png","../../src/assets/images/2.png","../../src/assets/images/3.png","../../src/assets/images/4.png","../../src/assets/images/5.png","../../src/assets/images/6.png"];
当你使用相对路径进行写的时候会引起404报错，图片资源无法加载。你需要写绝对路径
let imgArray=["/src/assets/images/1.png","/src/assets/images/2.png","/src/assets/images/3.png","/src/assets/images/4.png","/src/assets/images/5.png","/src/assets/images/6.png"];
这个问题先来给大家讲一下vue-cli的assets和static两个文件的区别。
assets：在项目编译的过程中会被webpack处理解析成模块依赖，只支持相对路径的形式。例如第一部分代码那样，"../../src/assets/images/1.png",这就是相对资源路径。
static：在这个目录下的文件不会被webpack处理，就是说存放在第三方文件的地方，不会呗webpack进行解析。他会直接被复制到最终打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过config.js文件中的bulid.assetsPublic和build.assertsSubDirectory链接来确定的。任何放在static中的文件需要以绝对路的形式进行引用。"/src/assets/images/1.png"这就是绝对路径的形式
根据webpack的特性，static一般存放的是不会变动的，第三档的文件，而assets放的是可能会变动的文件。
那么问题来了，用js动态加载assets的图片时会出现404的问题是因为什么呢？
原因：在webpack中会将图片来当做模块来进行使用的，因为是动态加载的，所以url-loader将无法解析图片的地址，然后npm run dev之后导致路径没有被webapck进行解析。
解决的方法：1.最简单的放大就是写成绝对路径2.使用require()方法3.如果使用的是ts的话，就用import将图片路径作为一个模块引进过来4.将图片放在public目录下。
