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

最近做的项目中经常会有从后台获取图片地址,动态绑定到src上,但是当网络不好,或者后台给的地址无法访问时页面就没办法渲染,用户体验很不好

一开始尝试了直接利用img原生属性onerror来设置默认图片

可是这样存在一个问题,如果默认图片也访问不到,src就会在后台给的地址和默认地址之间循环跳

第一种解决方法:



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

}

第二种解决方法:

控制onerror,阻止循环跳动



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

 

你可能感兴趣的:(vue)