如果没有使用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中运行时,所有图片都被替换了......

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在这里发布