Vue img中src地址无法访问时处理

设置默认图片防循环加载

最新推荐文章于 2025-06-23 16:52:49 发布

songbinchao

最新推荐文章于 2025-06-23 16:52:49 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_31544285/article/details/85335226

本文探讨了在网页中使用img元素的onerror属性来设置默认图片，防止因默认图片无法加载而产生的循环跳转问题。提出了两种解决方案，一是通过data属性存储默认图片路径并在onerror事件中直接修改src属性；二是控制onerror事件，阻止循环加载。

直接利用img原生属性onerror来设置默认图片

<img class="room_img" onerror="javascript:this.src='@/assets/image/activity/defaultImg.jpg'" :src="'/outpage?url='+item.pic" alt="">
可是这样存在一个问题，如果默认图片也访问不到，src就会在后台给的地址和默认地址之间循环跳

第一种解决方法：

<img class="room_img" :onerror="defaultSrc" :src="'/outpage?url='+item.pic" alt="">

data() {
return {
defaultSrc:'this.src="' + require('@/assets/image/activity/defaultImg.jpg') + '"'
}

}
第二种解决方法：

控制onerror，阻止循环跳动

<img :src="'/outpage?url='+item.pic" onerror="nofind()" />

nofind() {
const img=event.srcElement;
img.src="@/assets/image/activity/defaultImg.jpg";
img.onerror=null; // 控制不要一直跳动
}