如果你使用的是Angular 1。X你可以包含一个指令，允许你回退到任意数量的图像。fallback属性支持单个url，数组内的多个url，或使用范围数据的角表达式:

<img ng-src="myFirstImage.png" fallback="'fallback1.png'" />
<img ng-src="myFirstImage.png" fallback="['fallback1.png', 'fallback2.png']" />
<img ng-src="myFirstImage.png" fallback="myData.arrayOfImagesToFallbackTo" />

在angular app模块中添加一个新的fallback指令:

angular.module('app.services', [])
    .directive('fallback', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                var errorCount = 0;

                // Hook the image element error event
                angular.element(element).bind('error', function (err) {
                    var expressionFunc = $parse(attrs.fallback),
                        expressionResult,
                        imageUrl;

                    expressionResult = expressionFunc(scope);

                    if (typeof expressionResult === 'string') {
                        // The expression result is a string, use it as a url
                        imageUrl = expressionResult;
                    } else if (typeof expressionResult === 'object' && expressionResult instanceof Array) {
                        // The expression result is an array, grab an item from the array
                        // and use that as the image url
                        imageUrl = expressionResult[errorCount];
                    }

                    // Increment the error count so we can keep track
                    // of how many images we have tried
                    errorCount++;
                    angular.element(element).attr('src', imageUrl);
                });
            }
        };
    }])

我认为仅仅使用HTML是不可能的。然而，使用javascript，这应该是可行的。基本上我们循环每个图像，测试它是否完整，如果它的naturalWidth为零，那么这意味着它没有找到。代码如下:

fixBrokenImages = function( url ){
    var img = document.getElementsByTagName('img');
    var i=0, l=img.length;
    for(;i<l;i++){
        var t = img[i];
        if(t.naturalWidth === 0){
            //this image is broken
            t.src = url;
        }
    }
}

像这样使用它:

 window.onload = function() {
    fixBrokenImages('example.com/image.png');
 }

在Chrome和Firefox中测试

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

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

更新: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">

谷歌抛出了这个页面的“图像回退html”关键字，但因为上面没有帮助我，我正在寻找一个“svg回退支持IE低于9”，我继续搜索，这是我发现的:

<img src="base-image.svg" alt="picture" />
<!--[if (lte IE 8)|(!IE)]><image src="fallback-image.png" alt="picture" /><![endif]-->

这可能离题了，但它解决了我自己的问题，也可能帮助到其他人。

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="..." />