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

Posted 夜月天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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属性

  <img src="xxxxx" alt=""  notFoundSrc="images/imgNotFound.png"/>

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

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

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

3、执行error事件的逻辑。

 

以上是关于js 设置img标签的src资源无法找到的替代图片(通过img的属性设置)的主要内容,如果未能解决你的问题,请参考以下文章

HTML中img标签的src填本地绝对路径无法显示

怎样用JS动态的改变img标签里面的src属性实现图片的循环切换。

7 HTML中img标签的图片资源处理

js如何将绝对url传入到img标签的src中

img 标签 设置默认图片

关于Img标签绑定:src不显示图片