Vue-img图片加载失败时显示默认图片

1. Vue-img图片加载失败时显示默认图片

概念：在我们平时项目的开发过程中，经常会做展示网络图片的需求，但是由于网络等各种原因导致图片加载失败，无法展示出来，UI会给到我们一张默认图片来占位，通常我的处理方式如下:

2.通过注册vue自定义指令 实现

• 2.1先创建plugins文件夹，再创建plugins.js 文件

• plugins.js

import Vue from 'vue'
//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
Vue.directive('real-img', async function (el,binding) {//指令名称为：real-img
  let defaultURL = require('@/assets/images/whiteCap/image_touxian.png');//错误默认显示图片

  let imgURL = binding.value;//获取图片地址
  if (imgURL) {
      let exist = await imageIsExist(imgURL);
      if (exist) {
          el.setAttribute('src', imgURL);
      } else {
        el.setAttribute('src', defaultURL);
      }
  }
})

/**
* 检测图片是否存在
* @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;
  })
}

• main.js

// 导入全局注册自定义指令
import './plugins/plugins.js'

• 使用

正常显示userInfo.headPortrait，加载失败则显示上面的defaultURL图片。

<img v-real-img="userInfo.headPortrait"/>