vue3 动态加载图片资源

在做项目的时候使用v-for动态加载图片，此时图片加载失败，检查css样式，发现引入静态图片的路径发生改变。
原因如下：
webpack会对img标签使用file-loader进行处理，即img的路径会被webpack转换掉。
踩雷：
将图片放到public文件夹下，根据搜索的资料：public文件夹不会被webpack处理，路径不会发生改变，尝试之后没有解决该问题。
解决：
webpack在编译期间运行，会把所有的资源当作一个模块来进行处理，所以使用require引入模块进行解决
一、在标签中进行解决

<img :src="require(`@/assets/img/${item.img}`)">

通过该方法将图片作为模块引入，图片加载成功
二、在js中解决
在html挂在之前将图片路径修改，即在created（vue生命周期）中将所写数组赋值给array，对于array数