图片加载失败404--替换成默认图片

标签（空格分隔）： js

图片加载失败了，显示一张裂了的小图，很影响页面，所以如何才能处理这种情况呢？

图片有一个事件，
onerror：图像加载过程中发生错误时被触发。
onabort：图片加载的时候，用户通过点击停止加载时触发，通常在这里触发一个提示：“图片正在加载”。
onload：当图片加载完成之后触发。

关于onerror，到底什么情况下才会触发呢？

• 1.src属性为空或者null
• 2.src的地址与当前页面的地址一致
• 3.在加载过程中因为某些原因崩溃
• 4.图片的元数据已损坏，无法知道尺寸，并且<img>标签也没定义尺寸
• 5.当前的user agent不支持该图片格式

两种办法

1.写在行内
隐藏

<img src="http://172.16.130.120:20154/4541.jpg" onerror="javascript:this.style.display='none'">

换成默认图片

<img src="http://172.16.130.130:20154/319f24126.jpg" alt="" onerror="this.src='../../../../image/epvl/case_default_video.png';this.onerror='null' ">

2.监听全局，如果有换成默认图片

<img src="http://172.16.229.120:20154/2630ec44.jpg" alt="">      


var defautImg = './default_video.png'//本地图片地址
 document.addEventListener("error", function (e) {
     console.log("e------",e);
     var elem = e.target;
     if (elem.tagName.toLowerCase() == 'img') {
         elem.src = defautImg;
     }
 }, true);

这种办法必须方法在dom渲染之前定义，不然图片加载失败后无法找到。