利用onerror 事件处理img标签中的src图片加载失败

如果 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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
 

如果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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

参考
img标签的onerror事件

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/107190403