1.使用$refs获取节点监听
// FallbackImage.vue
<template>
<div>
<img :src="imageSrc" ref="img">
<div>
</template>
<script>
export default {
name: 'fallback-image',
props: ['src', 'srcFallback'],
data () {
return {
imageSrc: this.src
}
},
mounted () {
this.$refs.img.onerror = () => {
this.imageSrc = this.srcFallback
}
}
}
</script>
2.@error事件进行判断
<img :src="item.imagepath" alt="" @error = "_imageError" />
methods: {
1.局部定义事件
imageError() {
},
}
2.全局定义方法
Vue.use(Vuex);
Vue.prototype._imageError = function (e) {
e.target.src = defaultCoverImg;
}