javascript - 检查图像是否存在，如果不存在则使用 Javascript 设置默认图像

Question

我有很多图片。喜欢:

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

有些图像可能不存在。所以浏览器会显示一张残破的图像图片。这是丑陋的。如何使用 Javascript 而不是 jQuery 来确定图像是否存在？如果不行，给个本 map 片替换。谢谢。

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

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 中运行它时，所有图片都被替换了...

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';">

Originally posted by @svend here