html图片未找到替换,js 设置img标签的src资源无法找到的替代图片(通过img的属性设置)...

在网站的前端页面设计中，要考虑到img图片资源的存在性，如果img的src图片资源不存在或显示不出来，则需要显示默认的图片。如何做到呢？

一、监听document的error事件

document.addEventListener("error", function (e) {var elem =e.target;if (elem.tagName.toLowerCase() === ‘img‘) {var notFoundImgSrt = $(elem).attr("notFoundSrc");if(notFoundImgSrt) {

$.get(notFoundImgSrt, null, function (response, status, xhr) {if (xhr.status === 200)

elem.src=notFoundImgSrt;

});

}

}

},true);

img的onerror事件是不冒泡的，因此我们得自己手动写代码，监听document的error事件。如果当前发出error事件的目标是img标签，则找到该img标签的notFoundSrc属性，并通过ajax去判断当前站点是否存在该默认图片，如果存在该默认图片，则将其赋值该img的src属性。

二、设置img标签的notFoundSrc属性

由代码可以看见，xxxxx不是一个真实图片资源的路径，因此：

1、img标签必会触发其error事件；

2、由于我们自定义了一个document的error监听事件，这时document就会捕捉img发出的error事件；

3、执行error事件的逻辑。

原文：https://www.cnblogs.com/williamwsj/p/9132657.html