在vue中v-for循环遍历图片不显示错误的解决方案

最新推荐文章于 2023-10-24 20:00:00 发布

余道各努力，千里自同风

最新推荐文章于 2023-10-24 20:00:00 发布

阅读量1.2k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70547044/article/details/130124933

版权

在Vue项目中，当使用for循环遍历显示本地图片时，发现图片无法正常显示。尽管图片路径正确，且单个引用可以工作。问题在于for循环内引用图片需使用require()函数来处理路径，以便Webpack能正确打包。修复这个问题后，通过在每个图片路径前添加require()，for循环中的图片就能成功显示了。

摘要由CSDN通过智能技术生成

vue本地图片路径正确，但for循环不显示

<div v-for="(item,index) in img">
 	<img :src="item.imc" width="80" height="80"></img>
</div>



img:[{imc:'./ww.png'},{name:'./imc.png'}],

看了看代码路径也是正确的，而且单个是能显示的，可for循环之后图片就显示不出来了

最后发现单个显示的跟for循环显示的图片路径不一样

经过改正加个require()就可以显示了

<div v-for="(item,index) in img">
 <img :src="item.imc" width="80" height="80"></img>
 </div>


img:[{imc:require('./ww.png')},{imc:require('./ww.png')}],