当img无法显示时，应该发生什么？ [英] What is supposed to happen when an img can't be displayed?

问题描述

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

官方来源对此有意含糊。他们说，alt文本应该被使用，但他们不说如何！

所以，除非我没有搜索足够好（我做了很多谷歌我甚至Binged！）这个信息不是。

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

• Mozilla将inline文本作为当前文本的一部分显示


• IE将alt文本显示为内联块，破碎的图片图标，并以不同的字体显示。


• Chrome还会显示一个内嵌块和破碎的图片图标，并在其周围放置边框。它不改变字体。

 < p>这是我的新车。 < img src =images / mynewcar.jpgalt =这是一辆红色的车，有四个轮子。/>就是这样。< / p>  

• Chrome现在不显示任何内容，甚至没有显示任何内容


• IE仍会以较小的字体显示替代文字，但现在前面没有破碎的图片图示。






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





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

解决方案

似乎没有硬而快的规则围绕着这一点。 HTML规范仅描述了浏览器如何可以预期的行为，但是没有规范的要求在浏览器上遵循信的行为。 CSS规格甚至没有触及它。





W3C HTML5的第10.4.2节描述了如何根据一组规则来呈现 img 元素，这些规则指的是 img 元素代表。





第4.7.1节，一种方法，描述 img 元素表示取决于 src 和 alt 属性：




img 元素表示取决于 src 属性和 alt 属性。





b
$ b

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





图片是内容的关键部分; alt 属性给出了图像的文本等同物或替换。





如果图像可用，





否则，元素代表由 alt 给出的文本， code>属性。用户代理可以向用户提供图像存在但已从呈现中省略的通知。




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





因此，回到10.4.2节，适用以下规则：




如果元素是 img 表示一些文本且用户代理不希望此更改的元素

用户代理应将元素视为未替换的短语元素，其内容是文本，可选地具有指示图像丢失的图标，使得用户可以请求显示图像或调查其不呈现的原因。在非图形上下文中，应省略此图标。




似乎Firefox正在遵循此期望>需求），虽然生成的框是替换还是不替换，我不确定。同样对于其他浏览器 - 内联块可以被替换或不替换。请注意，HTML表示说明元素，而不是内联元素或inline-block元素，再次增加了整个事物的模糊性。





当通过用户偏好来禁用图像不是我所谓的向用户提供图像存在但是已经从呈现中省略的通知，但是同样不是必须的。不过，我不明白为什么Chrome认为这是一个好主意。什么是替代文本，又是？




What is the browser supposed to do exactly when an img can't be displayed?

The official sources are deliberately vague about this. They say the alt text is supposed to be used, but they don't say how!
So unless I haven't searched good enough (and I did a lot of Googling. I even Binged!) this information isn't there. And the browsers differ widely in what they do.

If an image can't be loaded because it isn't there,

• Mozilla displays the alt text inline as part of the current text
• IE displays the alt text as an inline-block, preceded by the "broken image" icon, and in a different font
• Chrome also displays an inline block and the "broken image" icon, and it puts a border around it. It doesn't change the font though.

<p>This is my new car.
  <img src="images/mynewcar.jpg" alt="It's a red car, with four wheels."/>
  And that's it.</p>

Now if you change the browsers' settings to not load images, the behaviour changes in most browsers.

• Chrome now doesn't display anything, not even the alt text.
• IE still displays the alt text in a smaller font, but now without the "broken image" icon in front.
• Mozilla still displays the alt text inline.

So my question is, which of these browsers does the right thing?

And by that I don't mean, "what do you think is the best approach"? I really mean what are the official rules governing this behaviour? Are there W3C pages (or even WHATWG pages) that I managed to miss, or where I misinterpreted the rules?

解决方案

It would appear that there are no hard and fast rules around this. The HTML spec only describes how a browser can be expected to behave, but imposes no normative requirements upon browsers to follow said behavior to the letter. The CSS spec doesn't even touch on it.

Section 10.4.2 of W3C HTML5 describes how img elements are rendered according to a set of rules that refer to what the img elements represent.

Section 4.7.1, a ways down, describes what an img element represents depending on its src and altattributes:

What an img element represents depends on the src attribute and the alt attribute.

[...]

If the src attribute is set and the alt attribute is set to a value that isn't empty

The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

So, if an image is unavailable, an img element represents its alt text (since there is no image to be represented!).

So, going back to section 10.4.2, the following rule applies:

If the element is an img element that represents some text and the user agent does not expect this to change
The user agent is expected to treat the element as a non-replaced phrasing element whose content is the text, optionally with an icon indicating that an image is missing, so that the user can request the image be displayed or investigate why it is not rendering. In non-graphical contexts, such an icon should be omitted.

It seems that Firefox is following this expectation (note: not requirement) most closely, though whether the box that is generated is replaced or non-replaced, I'm not sure. Likewise for the other browsers — an inline-block can either be replaced or non-replaced. Notice that HTML says "phrasing element", not "inline element" or "inline-block element", again adding to the vagueness of the whole thing.

What Chrome does when images are disabled through user preference is not what I would call "[providing] the user with a notification that an image is present but has been omitted from the rendering", but again, it's also not a requirement. Still, I don't understand why Chrome thinks that's a good idea. What was alt text for, again?

这篇关于当img无法显示时，应该发生什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！