vue动态加载图片并在不存在时加载默认图片

最新推荐文章于 2022-10-09 11:25:22 发布

ecH0o0

最新推荐文章于 2022-10-09 11:25:22 发布

阅读量446

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ecH0o0/article/details/126291108

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求场景：
列表中每个卡片加载不同的图片
解决方法：
绑定方法，并使用require作为返回；当链接不存在时，require在编译时会报错，用try catch处理

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

getIconUrl(imgUrl) {
	try{
		//存在则加载图片
		return require("../../a/b/" + imgUrl + ".png");
	}catch(e) {
		//不存在则catch中返回默认的图片
		return require("../../a/b/default.png");
	}
}