vue解决图片加载失败显示默认图片的方法

在项目中经常会遇到图片加载失败需要显示默认图片的场景，那么如何在图片src资源加载失败显示出默认的图片呢？
方法一：onerror

在vue项目中前面需要加个bind:

data(){
  return{
    imgSource:require('图片路径')
    default:'this.src="'+require('默认的图片路径')+'"'
  }
}

但是有时候显示不出来默认图片，这个时候需要稍微修改下：

这样就可以在src资源加载失败显示出默认的图片

方法二： 使用自定义指令

自定义指令defaultImg.js:

function install(Vue, options = {}) {
  /**
   * 检测图片是否存在
   * @param url
   */
  let imageIsExist = function (url) {
    return new Promise((resolve) => {
      var img = new Image();
      img.onload = function () {
        if (this.complete == true) {
          resolve(true);
          img = null;
        }
      }
      img.onerror = function () {
        resolve(false);
        img = null;
      }
      img.src = url;
    })
  }
  Vue.directive(options.name || 'default-img', async function (el, binding) {//指令名称为：v-default-img
    const imgURL = el.src;//获取图片地址
    const defaultURL = binding.value;
    if (imgURL) {
      const exist = await imageIsExist(imgURL);
      if (exist) {
        el.setAttribute('src', imgURL);
      } else {
        el.setAttribute('src', defaultURL);
      }
    } else {
      el.setAttribute('src', defaultURL);
    }
  })


}

export default { install };

在main.js使用自定义指令:

import defaultImg from './directives/defaultImg';
Vue.use(defaultImg);

在vue项目中使用:

data(){
  return{
    imgSource:require('图片路径')
    default:require('默认的图片路径')
  }
}