PS:以下只是個人處理方式進(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)一封裝到一個JS文件中
// v-imgerror="備用圖地址"
export const imgerror = {
inserted(el, binding) {
// el 指令所在的元素 也就是我們的img標(biāo)簽
// binding 指令的相關(guān)信息對象
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'
// 遍歷得到的對象, 批量進(jìn)行自定義指令的注冊
for (const key in ALLdirectives) {
// console.log(key, directives[key])
Vue.directive(key, ALLdirectives[key])
}
