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

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

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

为我工作。

如果你已经创建了动态Web项目，并将所需的图像放置在WebContent中，那么你可以通过使用下面提到的Spring MVC中的代码来访问图像:

<img src="Refresh.png" alt="Refresh" height="50" width="50">

你也可以创建名为img的文件夹，并将图像放在img文件夹中，然后将img文件夹放在WebContent中，然后你可以使用下面提到的代码访问图像:

<img src="img/Refresh.png" alt="Refresh" height="50" width="50">

除了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

在Spring in Action第三版中找到了这个解决方案。

<img src=“../资源/images/Image1.jpg”

更新: 这不是一个只有HTML的解决方案…Onerror是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">

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

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