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

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

解释

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

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

更新:2022年(chrome仍然工作!!)

我最近不得不构建一个包括任意数量的备份映像的备份系统。下面是我如何使用一个简单的JavaScript函数做到这一点。

HTML

 <img src="some_image.tiff"
    onerror="fallBackImg(this);"
    data-src-1="some_image.png"
    data-src-2="another_image.jpg">

JavaScript

function fallBackImg(elem){
    elem.error = null;
    let index = elem.dataset.fallIndex || 1;
    elem.src = elem.dataset[`src-${index}`];
    elem.dataset.fallIndex = ++index;
}

我觉得这是处理许多备用图像的一种非常轻量级的方式。

如果你想要“HTML only”，那么这个

<img src="some_image.tiff"
    onerror="this.error = null;
        let i = this.dataset.i || 1;
        this.src = this.dataset[`src-${i}`];
        this.dataset.i = ++i;"
    data-src-1="some_image.png"
    data-src-2="another_image.jpg">

JQuery的可模块化版本，在文件末尾添加:

<script>
    $(function() {
        $('img[data-src-error]').error(function() {
            var o = $(this);
            var errorSrc = o.attr('data-src-error');

            if (o.attr('src') != errorSrc) {
                o.attr('src', errorSrc);
            }
        });
    });
</script>

在你的img标签上:

<img src="..." data-src-error="..." />

这对我来说很有效。也许你想用JQuery来挂钩事件。

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="add alternative text here">

更新了jacquargs错误保护

更新:CSS唯一的解决方案 我最近看到Vitaly Friedman演示了一个我不知道的很棒的CSS解决方案。其思想是将内容属性应用于破碎的图像。通常:after或:before不应用于图像，但当它们被破坏时，它们就会被应用。

<img src="nothere.jpg" alt="add alternative text here">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
}
</style>

演示:https://jsfiddle.net/uz2gmh2k/2/

正如提琴所示，破碎的图像本身并没有被删除，但这可能会解决大多数情况下没有任何JS或CSS的问题。如果你需要在不同的位置应用不同的图像，只需用一个类进行区分:.my-special-case img:before{…

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

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

解释

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

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

我添加加载="lazy"到img标签。在某些情况下，它是有效的。