Vue img中src地址无法访问时处理
最近做的项目中经常会有从后台获取图片地址,动态绑定到src上,但是当网络不好,或者后台给的地址无法访问时页面就没办法渲染,用户体验很不好一开始尝试了直接利用img原生属性onerror来设置默认图片<img class="room_img" onerror="javascript:this.src='@/assets/image/activity/def
·
最近做的项目中经常会有从后台获取图片地址,动态绑定到src上,但是当网络不好,或者后台给的地址无法访问时页面就没办法渲染,用户体验很不好
一开始尝试了直接利用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; // 控制不要一直跳动
}
更多推荐
已为社区贡献5条内容
所有评论(0)