有时候通过接口获取数据时会发生图片地址明明返回了但却只有个别的显示了，不论是什么原因发生的，此时肯定不能发生直接不展示情况，我们可以用一个自定义默认图片去代替展示。
1. 当使用图片区域极少情况下
当会发生这种情况极少的情况下，我们可以用onerror事件获取到此时音频加载期间发生了错误并执行一些方法。
以下为影响媒体加载的事件：
-
onerror事件在视频/音频（`audio/video）数据加载期间发生错误时触发。 -
onabort事件在视频/音频（audio/video）终止加载时触发，该事件在多媒体数据终止加载时触发，而不是发生错误时触发。 -
onstalled事件在浏览器获取媒体数据，但媒体数据不可用时触发。 -
onsuspend事件在浏览器读取媒体数据中止时触发。
具体用法：
- 会发生情况较少情况下，单个定义
<div><img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" onerror="this.src='https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png'"/></div>
// 写成事件的话可以在替换图片的同时做一些其他的事情
<div><img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" @error="replacePictures"/></div>
replacePicture () {
this.$refs.imgs.src = 'https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png'
// 此时这里可以做一些别的操作
}
2制作成指令的形式全局/局部使用
1.创建一个js文件用来存储自定义指令对象
export const imagerror = {
// 指令对象 会在当前的dom元素插入到节点之后执行
inserted(dom, options) {
// options是 指令中的变量的解释 其中有一个属性叫做 value
// dom 表示当前指令作用的dom对象
// dom认为此时就是图片
dom.src=dom.src || options.valus //处理图片为null的情况
// 当图片有地址 但是地址没有加载成功的时候 会报错 会触发图片的一个事件 => onerror
dom.onerror = function() {
// 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的内容
// dom可以注册error事件
// 此时这里可以做一些别的操作
dom.src = options.value // 这里不能写死
}
},
//指令所在组件的 VNode 及其子 VNode 全部更新后调用
componentUpdated(dom, options) {
dom.src = dom.src || options.value
}
}
2.在main.js文件中全局挂载
import * as directives from '@/directives' //指令路径
// 注册自定义指令
// 遍历所有的导出的指令对象 完成自定义全局注册
Object.keys(directives).forEach(key => {
// 注册自定义指令
Vue.directive(key, directives[key])
})
3.在需要的地方写入
<img v-imagerror="defaultImg" :src="allFrom.staffPhoto" alt=""/>
<!-- 在script的return里写入 -->
defaultImg: require("@images/head.jpg"), //本地图片文件路径
defaultImg: 'https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png'
网友评论