如果 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;
}
</script>
如果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>
