项目场景:
有时后台返回的图片地址不是一个有效的图片,此时就需要默认返回一个图片来显示
解决方案:
自定义指令 + 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')
}
},