Vue 中动态拼接图片 src 地址

最新推荐文章于 2024-09-10 15:36:51 发布

Zhou_慧

最新推荐文章于 2024-09-10 15:36:51 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/m0_54409638/article/details/117883839

版权

本文介绍了在Vue中遇到动态加载assets目录下图片时出现404状态码的问题及解决方案。通过使用`require`结合动态路径的方式，解决了图片无法正常显示的问题。示例代码展示了在模板中使用`v-for`遍历列表，并通过方法`getImgUrl`动态生成图片的src路径。

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

Vue 中动态拼接图片 :src 地址

用 js 动态加载 assets 或者本文件的图片出现404的状态码

代码示例：

<ul>
    <li v-for="(item,index) in list" :key="index">
        <img :src="getImgUrl(item.imgurl)" alt="" /> //这里给图片一个绑定一个方法，并传参
	</li>
</ul>

//js代码:
methods:{
    //获取图片地址
    getImgUrl (img) {
        return require("@/assets/images/" + img+"");
    }
},