当无法显示 img 时应该发生啥？

Posted 2023-03-06

【中文标题】当无法显示 img 时应该发生啥？

【英文标题】：What is supposed to happen when an img can't be displayed?当无法显示 img 时应该发生什么？

【发布时间】：2016-02-29 19:18:24

【问题描述】：

img 无法显示时，浏览器应该怎么做？

官方消息对此故意含糊其辞。他们说应该使用替代文本，但他们没有说如何！ 因此，除非我搜索得不够好（而且我做了很多谷歌搜索。我什至狂欢了！）这些信息不存在。并且浏览器的功能也大相径庭。

如果图片因为不存在而无法加载，

Mozilla 将替代文本内嵌显示为当前文本的一部分 IE 将 alt 文本显示为内联块，前面是“损坏的图像”图标，并以不同的字体显示 Chrome 还显示内嵌块和“损坏的图像”图标，并在其周围放置边框。但它不会改变字体。

<p>This is my new car.
  <img src="images/mynewcar.jpg" />
  And that's it.</p>

现在，如果您将浏览器的设置更改为不加载图像，大多数浏览器的行为都会发生变化。

Chrome 现在不显示任何内容，甚至不显示 alt 文本。 IE 仍以较小的字体显示替代文本，但现在前面没有“损坏的图像”图标。 Mozilla 仍内联显示替代文本。

所以我的问题是，这些浏览器中哪些是正确的？

我的意思不是“你认为最好的方法是什么”？我的意思是管理这种行为的官方规则是什么？是否有我设法错过的 W3C 页面（甚至是 WHATWG 页面），或者我误解了规则的地方？

【参考方案1】：

来自 MDN html 元素 <img>IMG

浏览器并不总是显示元素引用的图像。 非图形浏览器就是这种情况（包括 有视力障碍的人），如果用户选择不显示 图像，或者如果浏览器无法显示图像，因为它是 无效或不受支持的类型。在这些情况下，浏览器可能 用此元素的 alt 中定义的文本替换图像 属性。

默认行为si显示alt属性的内容

请参阅this doc 参考 MDN 文档以获取参考 也可以参考this W3C ref

这个http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/understanding-techniques.html 了解 WCAG 成功标准的技术

【讨论】：

是的，所以 MDN 也说可以使用替代文本，但不是它应该如何显示。嗯。

该段似乎专门指的是非图形浏览器。

不仅如此。 alt属性对img的作用正是如此。当图像不是显示器时（典型的非图形浏览器，还有 img 可视化错误），alt 消息帮助用户显示图像的文本描述。

我的错，我看错了。它表示对于非图形浏览器，或如果图像被禁用，或如果图像不可用。

@BoltClock 正确。这就是为什么我觉得奇怪的是，如果没有禁用图像，Chromium 只会显示替代文本！所以一定有我忽略的东西。或者，Chromium 的开发人员都忽略了一些东西。

【参考方案2】：

这似乎没有硬性规定。 HTML 规范仅描述了预期浏览器的行为方式，但没有对浏览器强制遵循所述行为的规范要求。 CSS 规范甚至没有涉及到它。

Section 10.4.2 of W3C HTML5 描述了img 元素如何根据一组规则呈现，这些规则引用img 元素表示的内容。

Section 4.7.1，一个方法向下，描述了一个 img 元素代表什么取决于它的 src 和 alt attributes：

img 元素所代表的内容取决于src 属性和alt 属性。

[...]

如果设置了src 属性并且alt 属性设置为非空值

图片是内容的关键部分； alt 属性为图像提供文本等价物或替换。

如果图像可用并且用户代理配置为显示该图像，则该元素表示该元素的图像数据。

否则，该元素表示由alt 属性给出的文本。用户代理可能会向用户提供图像存在但已从渲染中省略的通知。

因此，如果图像不可用，img 元素将代表其替代文本（因为没有要代表的图像！）。

所以，回到第 10.4.2 节，以下规则适用：

如果元素是一个代表某些文本的 img 元素，并且用户代理不希望这种情况发生变化 用户代理应该将元素视为不可替换的短语元素，其内容是文本，可选地带有一个指示图像丢失的图标，以便用户可以请求显示图像或调查为什么它没有呈现.在非图形环境中，应省略此类图标。

似乎 Firefox 最接近地遵循了这个期望（注意：不是要求），虽然生成的框是被替换还是未被替换，我不确定。对于其他浏览器也是如此——内联块可以被替换或不被替换。请注意，HTML 说的是“短语元素”，而不是“内联元素”或“内联块元素”，这再次增加了整个内容的模糊性。

当通过用户偏好禁用图像时 Chrome 会做什么不是我所说的“[向用户提供图像存在但渲染中省略的通知”，但同样，这也不是必需的.不过，我不明白为什么 Chrome 认为这是个好主意。替代文字又是干什么用的？