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

设置默认图片防循环加载
本文探讨了在网页中使用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;  // 控制不要一直跳动 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值