前端VUE项目中如何处理图片加载失效/裂开的问题

PS:以下只是个人处理方式进行记录

处理方式概述：可以借用img标签的onerror事件，通过自定义指令进行赋值

1. v-imgerror为img的自定义指令
<template>
  <img v-imgerror="defaultImg" :src="staffPhoto" class="user-avatar">
</template>

2. 将自定义组件统一封装到一个JS文件中
// v-imgerror="备用图地址" 
export const imgerror = {
  inserted(el, binding) {
   // el 指令所在的元素  也就是我们的img标签
   // binding 指令的相关信息对象
    el.onerror = function() {
      // console.log('图片加载失败了'), 设置备用图片地址
      el.src = binding.value      // binding.value 指令的值 也就是我们的defaultImg
    }
  }
}
3. 组件中引入备用图片
import Img from '@/assets/common/head.jpg'
 data() {
    return {
      defaultImg: Img
    }
  }
4. 将封装的自定义指令挂载到Vue上(main.js)
// import { imgerror } from '@/directives'
import * as ALLdirectives from '@/directives'
// 遍历得到的对象, 批量进行自定义指令的注册
for (const key in ALLdirectives) {
  // console.log(key, directives[key])
  Vue.directive(key, ALLdirectives[key])
}