PS:以下只是個(gè)人處理方式進(jìn)行記錄

處理方式概述：可以借用img標(biāo)簽的onerror事件，通過自定義指令進(jìn)行賦值

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

2. 將自定義組件統(tǒng)一封裝到一個(gè)JS文件中
// v-imgerror="備用圖地址" 
export const imgerror = {
  inserted(el, binding) {
   // el 指令所在的元素  也就是我們的img標(biāo)簽
   // binding 指令的相關(guān)信息對(duì)象
    el.onerror = function() {
      // console.log('圖片加載失敗了'), 設(shè)置備用圖片地址
      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'
// 遍歷得到的對(duì)象, 批量進(jìn)行自定義指令的注冊(cè)
for (const key in ALLdirectives) {
  // console.log(key, directives[key])
  Vue.directive(key, ALLdirectives[key])
}