vue 图片加载错误显示默认图片

 

参考文档 https://www.cnblogs.com/z937741304/archive/2019/11/06/11809547.html

 

方法一： onerror

onerror加载默认图片

方法二：自定义指令

建议先加载图片，图片加载错误后加载默认图片，自定义指令可在不同页面使用，避免代码重复。

/**
* 检测图片是否存在
* @param url
*/
let imageIsExist = function (url) {
  return new Promise((resolve) => {
    var img = new Image();
    img.onload = function () {
      if (this.complete == true) {
        console.log('资源加载');
        resolve(true);
        img = null;
      }
    }
    img.onerror = function () {
      console.log('资源error', img);
      resolve(false);
      img = null;
    }
    img.src = url;
  })
};



// 单独作用于应用模块的管理
// 传的是错误的图片
Vue.directive('err-img', async function (el, binding) {
  let imgURL = binding.value;//获取图片地址
  let realURL = el.src;
  if (imgURL) {
    let exist = await imageIsExist(realURL);
    if (!exist) {
      el.setAttribute('src', imgURL);
    }
  }
});

 

使用

 <img src="../../assets/img/error/app_d.png" v-real-img="appDetail.icon" alt=""> 

 

方法三：当异步获取图片加载失败

异步获取图片链接，图片加载成功则显示成功的url,加载失败显示默认 defaultImg 图片

// 在接口中获取图片链接后调用this.loadImg

loadImg(url) {
      const img = new Image();
      img.src = url;
      img.onload = () => {
        this.imageUrl = url;
      };
      img.onerror = () => {
        this.imageUrl = this.defaultImg;
      };
    },

 

<img class="img-url" :src="imageUrl" />