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

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

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

如果你使用的是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);
                });
            }
        };
    }])

简单利落的解决方案，包括一些好的答案和评论。

<img src="foo.jpg" onerror="this.src='error.jpg';this.onerror='';">

它甚至解决了无限循环风险。

为我工作。

我认为仅仅使用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中测试

除了Patrick的精彩回答，对于那些正在寻找跨平台angular js解决方案的人来说，你可以看看:

<object type="image/png" data-ng-attr-data="{{ url || 'data:' }}">
    <!-- any html as a fallback -->
</object>

这是一个我试图找到正确解决方案的页面:http://plnkr.co/edit/nL6FQ6kMK33NJeW8DVDY?p=preview

你要求只有HTML的解决方案…

<！DOCTYPE html PUBLIC "-//W3C//DTD html 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd " > < html lang =“en”> <头> <标题>对象测试< /名称> <meta http-equiv=" content - type " content="text/html;charset = utf - 8”> > < /头 <身体> < p > <object data="https://stackoverflow.com/does-not-exist.png" type="image/png"> <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow徽标和图标等"> < /对象> < / p > < /身体> < / html >

由于第一个图像不存在，将显示回退(在这个网站上使用的精灵*)。如果你用的是不支持object的旧浏览器，它会忽略那个标签，使用img标签。查看caniuse网站了解兼容性。从IE6+开始的所有浏览器都广泛支持该元素。

*除非图片的URL改变了(再次)，在这种情况下，你可能会看到alt文本。