使用Javascript检查图片是否存在，如果不存在则设置默认图片。

Question

我有很多图片，例如：

<img src="src1"/>
<img src="src2"/>
<img src="src3"/>

有些图片可能不存在，所以浏览器会显示一张损坏的图片。这很丑陋。如何使用Javascript而非jQuery来判断图像是否存在？如果不存在，给它一个本地的图片来代替它。谢谢。

我尝试了这段代码，它替换了所有的图片而不仅仅是那些不存在的。

function imgError(image) {
            image.onerror = "";
            image.src = "http://www.hi-pda.com/forum/uc_server/data/avatar/000/85/69/99_avatar_middle.jpg?random=10.20420048222877085";
            return true;
        }

        var imgs = document.getElementsByTagName("img");
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onerror=imgError(imgs[i]);
        }

这些图片是

<img src="rrrrr"  />
    <img src="http://www.hi-pda.com/forum/uc_server/data/avatar/000/52/56/39_avatar_middle.jpg"/>

第一张图片不存在，第二张存在。当我在Chrome中运行它时，所有的图片都被替换了...

- leizh00701

---

这里已经有一个答案了：https://dev59.com/tHVD5IYBdhLWcg3wGHeu#92819 - m4n0

https://dev59.com/o2Mk5IYBdhLWcg3w8SPa, https://dev59.com/3W025IYBdhLWcg3w_rFA, https://dev59.com/eWUq5IYBdhLWcg3wQ-NF - dekkard

可能是重复的问题：jQuery/Javascript替换破损图片 - iYoung

我尝试了这些代码，但它替换了所有的图片而不是那些不存在的。function imgError(image) { image.onerror = ""; image.src = "http://www.hi-pda.com/forum/uc_server/data/avatar/000/85/69/99_avatar_middle.jpg?random=10.20420048222877085"; return true; } var imgs = document.getElementsByTagName("img"); for (var i = 0; i < imgs.length; i++) { imgs[i].onerror=imgError(imgs[i]); } - leizh00701

Answer 1

简单解决方案：

<img src="http://src1/img.jpg" onerror="this.src='http://src1/error-img.jpg';">

设置在img标签内

更新

一种更好的解决方案，可阻止无限循环-感谢@stom

<img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';">

本文最初由@svend发布

- StudioTime

---

是的，但我想在所有图像上使用它，你可以再看一下问题，我尝试了其他问题中的方法，它替换了所有图像，而不仅仅是不存在的那些。 - leizh00701

只需在所有的图像标签中添加 onerror="this.src='http://src1/error-img.jpg';"，那么任何失败的图像都将显示您的错误默认图像。 - StudioTime

这是一个简单的解决方案，但如果 error-img.jpg 不存在，这会导致无限循环，请查看这个答案。 - Shaiju T

最初发布的链接提供了最佳解决方案，仅通过CSS即可实现，无需任何JS。 - iniravpatel

Answer 2

我使用以下代码解决了这个问题:

function nofind() {
    var img = event.srcElement
    img.src="http://www.cnblogs.com/sys/common/image/fileoperation/icon/default.gif";
    img.onerror = null; 
}

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onError=nofind;
}

- leizh00701

Answer 3

您可以将onerror事件监听器绑定到DOM中的所有图像上。

- Rayon