对于任何图像，只需使用以下javascript代码:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

其中ptImage是由document.getElementById()获得的<img>标记地址。

简单的img-element不是很灵活，所以我将它与picture-element结合在一起。这样就不需要CSS了。当发生错误时，所有srcset都被设置为回退版本。断开的链接图像不显示。它不会加载不需要的图像版本。图片元素支持响应式设计，并为浏览器不支持的类型提供多种回退。

<picture>
    <source id="s1" srcset="image1_not_supported_by_browser.webp" type="image/webp">
    <source id="s2" srcset="image2_broken_link.png" type="image/png">
    <img src="image3_fallback.jpg" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;">
</picture>

对于任何图像，只需使用以下javascript代码:

if (ptImage.naturalWidth == 0)
    ptImage.src = '../../../../icons/blank.png';

其中ptImage是由document.getElementById()获得的<img>标记地址。

如果你正在使用Angular/jQuery，那么这可能会有帮助……

<img ng-src="{{item.url}}" altSrc="{{item.alt_url}}" onerror="this.src = $(this).attr('altSrc')">

解释

假设该项目有一个属性url可能为空，当它是，那么图像将显示为破碎。这将触发onerror属性表达式的执行，如上所述。你需要像上面描述的那样重写src属性，但是你需要jQuery来访问你的altSrc。无法让它与普通JavaScript一起工作。

可能看起来有点俗气，但挽救了我的项目。

<style type="text/css">
img {
   background-image: url('/images/default.png')
}
</style>

请务必输入图像的尺寸，以及是否希望图像平铺。

上面的解决方案是不完整的，它错过了属性src。

这一点。src和this.attribute('src')是不一样的，第一个包含了对图像的完整引用，例如http://my.host/error.jpg，但属性只是保持原始值error.jpg

正确的解决方案

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