Vue环境下el-image图片动态加载失败问题

周哈哈！

已于 2023-05-31 15:01:13 修改

阅读量7.6k

点赞数 4

文章标签： vue.js 前端 javascript

于 2023-03-29 14:51:32 首次发布

本文链接：https://blog.csdn.net/zhou_xiaozhou/article/details/129836670

版权

<div v-for="(item,index) in list" :key="index">
    <el-image :src="item.img"></el-image>
</div>

最开始的需求类似上图，在v-for中实现图片显示，但是实际得到的效果是加载失败

查了以后发现，如果要实现动态加载图片，应该用require包裹住路径

<div v-for="(item,index) in list" :key="index">
    <el-image :src="require(item.img)"></el-image>
</div>

但是结果还是差强人意，后来发现问题在require里面必须是一个静态路径，不能是一个变量，最终解决办法是

<div v-for="(item,index) in list" :key="index">
    <el-image :src="require('../assest/image/' + item.img)"></el-image>
</div>

只要用字符串与变量拼接的方式就可以解决，查了资料，本质上是静态资源跟动态资源的区别......

这里放上一个博主链接解释的很详细有兴趣可以了解一下

在vue中动态的引入图片为什么要使用require - Silence的文章 - 知乎 https://zhuanlan.zhihu.com/p/622465389

关注