HTML5 <img>标签的替代图片

Question

我在想，在html的img标签中，是否有可能使用另一张图片替代文本。或者是否可以将img标签嵌套在alt中。例如： <img alt = "<img src='backup-image'>" src = "image">

- Hammad Ahmed

---

不确定是否可以使用纯HTML实现。可能需要一些脚本编写。 - Adjit

在什么情况下使用替代文本？alt 属性主要是为了在用户无法看到图像的情况下提供文本替代内容，因此它非常有用。 - Jukka K. Korpela

我想要一种图像替代方案而不是文本替代方案，但是我已经通过使用 onError JavaScript 函数找到了答案。 - Hammad Ahmed

Answer 1

不，您不能在<img>的alt属性中放置另一张图片。但是，您可以使用onerror事件使用JavaScript加载另一张图片，因此如果原始图片无法加载，则可以加载备用图片。

function standby() {
    document.getElementById('foo').src = 'https://www.google.com/images/srpr/logo11w.png'
}

<img id="foo" src="notfound.gif" onerror="standby()">

- j08691

---

这更像是一个技巧而不是答案，但你可以这样做（并不是说你应该这样做！）：<img src="image1" alt="image2" onerror="this.onerror=null;this.src=this.alt;">。 - smoore4

Answer 2

据我所知，alt属性应该只有文本，因为它对于屏幕阅读器“读取”图像非常有帮助。

如果你正在寻找的是当主要图片失败时的备用图片，你可以使用一些JavaScript来实现。

在这个问题上，你可以看到如何使用onError属性： jQuery/JavaScript to replace broken images

- Moz