如果 img标签中的src图片logo.png加载失败，原来的图片位置会被error.png 替换
<img src="logo.png" onerror="handleImageError()" /> <script type="text/javascript"> function handleImageError() { console.log(event); var img = event.target; img.src = "error.png"; // 控制它不循环; img.onerror = null; }
如果logo.png不存在会触发 onerror事件，指定图片error.png 去替补，
如果替补图片error.png 还不存在，还会继续触发onerror事件，
需要使用img.onerror=null 取消事件处理
Vue处理方式
<template>
<img v-bind="$attrs"v-on="$listeners"
@error="handleError" />
</template>
<script>
/**
* 有错误处理的图片
*/
export default {
name: "MoImage",
data() {
return {
// 默认值
defaultImage: require("@/assets/image/image-default.png"),
};
},
methods: {
// 错误值处理
handleError(event) {
event.target.src = this.defaultImage;
// 控制不要一直跳动
event.target.onerror = null;
},
},
};
</script>
参考
</div>
