图片加载失败处理

1.通过js监听图片的onerror事件，然后赋值新的图片

1
2
<img src='test.jpg' alt='test' onerror="this.src='default.jpg'">
因为没有default.jpg 所以你直接复制以上html的话，请求会死循环。

2.img 发生error的时候 before 和 after 将会起效

img 发生error的时候 before 和 after 将会起效demo

3.监听图片父元素的error事件，并且要在事件捕获阶段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="s">
        <img src="xx.jpg" alt="">
    </div>
    <script>
	//只要是父级就OK
    document.body.addEventListener('error',function(e){
        console.log(e.target);
        //e.target.src = "又是一张错误地址.jpg"; //这里如果使用base64:的图片，如果base64图片还有错误，那么也会死循环
        //使用一张1X1的透明gif图片
        e.target.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
    },true);
    </script>
</body>
</html>