vue自定义指令+onerror 解决图片显示报错问题

项目场景：

有时后台返回的图片地址不是一个有效的图片,此时就需要默认返回一个图片来显示

---

解决方案：

自定义指令 + img下的onerror 属性

自定义指令

onerror 是img加载失败显示一个碎片图片时 触发

1.创建一个单独的自定义指令页面,然后导出去

export const imagerror = {
  // 指令对象 会在当前的dom元素插入到节点之后执行
  inserted(dom, options) {
    // options是 指令中的变量的解释  其中有一个属性叫做 value
    // dom 表示当前指令作用的dom对象
    // dom认为此时就是图片
    // 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
    dom.onerror = function() {
      // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
      // dom可以注册error事件
      dom.src = options.value // 这里不能写死
    }
  }
}

2.在main.js 利用import *as 属性名from ‘指令文件地址’ 完成全局注册

import * as directives from '@/directives'
// {imagerror: {}, abc1: {}, ...}
// 注册自定义指令
// 遍历所有的导出的指令对象 完成自定义全局注册
// ['iamgerror', 'abc1', ...]
Object.keys(directives).forEach(key => {
  // 注册自定义指令
  Vue.directive(key, directives[key])
 
  // Vue.derective('iamgerror', {})
  // Vue.derective('abc1', {})
  // Vue.derective('abc2', {})
})

3.页面调用

<img v-imagerror="defaultImg" :src="staffPhoto" class="user-avatar">

 data() {
    return {
      defaultImg: require('@/assets/common/head.jpg')
    }
  },