受this question的启发,海报随意地指出,应该使用<object>
而不是<img>
来在HTML文档中嵌入图像。
我目前正在开发一个网络应用程序,作为一个完美主义者,我试图让它闪闪发光,符合所有标准。据我所知,<img>
标签将在即将到来的xHTML标准中被弃用,而现在即使是IE也能够正确处理<object>
,所以我想对我网站上的所有图像使用<object>
标签
很明显,海报上所说的“即将到来的标准”是被放弃的XHTML2规范,它甚至没有正式反对<img>
。(虽然显然有rumors的效果。
据我所知,我还没有看到Web开发社区中有任何人主张使用通用的<object>
标记,而不是可以说更语义化、更兼容的<img>
标记。
是否有充分的理由使用<object>
而不是<img>
?是否应该使用<object>
来代替<img>
-这可能会破坏什么?
5条答案
按热度按时间3df52oht1#
回答标题中的问题:是的,它是有效的,当然。
object
元素的有效性甚至不依赖于嵌入的数据类型。如果你想问它是否正确,那么答案是肯定的,规范中没有禁止或建议反对它的内容。在使用
object
嵌入图像的可能原因中,最实用的是它允许后备内容包含HTML标记,例如标题、列表、表格和短语标记。img
元素允许您仅指定纯文本作为备用内容-甚至不能指定段落分隔符。出于可访问性的原因,任何图像都应该具有要呈现的回退内容,例如当文档用于非视觉浏览(屏幕阅读器、盲文等)或图像由于某种原因不显示时。对于任何内容丰富的图像(例如,组织结构图或描述复杂流程的绘图),后备内容需要很长,并且需要具有某种结构。
然而,很少使用
object
来嵌入图像。后备内容的重要性没有得到广泛的理解,实际的经济和技术考虑经常导致后备问题被忽视。此外,object
在浏览器中的实现一直很慢,有很多错误,而且质量很差。直到最近,使用object
来安全地包含图像才变得可行。哪个元素更语义化的问题基本上是徒劳的,答案通常反映了误解“语义”概念的各种方式。
img
和object
都意味着包含(嵌入)外部内容。img
元素原则上用于包含图像,无论这意味着什么,尽管它也被用来包含视频。对于object
元素,type
属性可用于指定嵌入内容的类型,下至特定图像类型,例如type=image/gif
,或者它可以保持打开。这意味着
object
元素更灵活:你可以不指定类型,让它在HTTP头中指定。这样,嵌入数据的类型可以改变,而不改变object
元素或嵌入文档;例如,您可以从一个简单的版本开始,其中嵌入的内容是图像,然后用HTML文档(例如包含图像和文本)替换它。j9per5c42#
我见过的唯一一次使用对象来显示图像的情况是,当预期的对象由于某种原因无法加载时,创建一个“回退”。以W3规范为例:
只有尝试通过对象加载图像时,基本上会删除图像的语义,我认为这是非常糟糕的做法。
ubby3x7f3#
使用
object
而不是img
没有什么好的 * 实际 * 理由。object
的支持一直是不一致和混乱的。img
用于图像,embed
用于flash内容,video
或audio
用于多媒体内容。基本上,object
的唯一用途就是调用特定的插件。话虽如此,
object
存在的哲学立场还是很好的。它是任何类型的内容的通用元素,可以包含嵌套的回退内容。W3C/XHTML 2有一个非常理想化的html路线图,强调语法和语义的纯净性,并希望做一些事情,比如在任何元素上允许href
(消除a
),并消除img
以支持object
。然而,浏览器似乎永远无法以完全通用的方式正确地获得object
。此外,很难为通用的object
元素定义js API。这就是为什么video
和audio
是分开的一个重要原因--object
服务视频不会暴露js视频API。然而,XHTML 2输了,HTML5赢了,HTML5支持
img
,所以使用img
。xoefb8l84#
我遇到了一个使用object over img标签的真实用例。我使用PlantUML生成包含工具提示的SVG。如果我使用img标记来包含img,则所有原生SVG指针事件都不起作用。但是如果我使用object标签,presto - all over onhover/mouseover行为就能按预期工作。
6qfn3psc5#
我刚刚遇到了一个问题,迫使我使用
<object>
而不是<img>
。我有一个名为
lv2x.php
的文件,我将它用作svg文件(php头"Content-Type: image/svg+xml"
)。在svg文件中,我导入了一个google字体CSS链接(使用link-href
或@import
)。问题是:当我在新选项卡中打开文件时:
https://.../lv2x.php?lv=10
它正确地显示了我用于文本的字体。但是当我使用<img src="https://.../lv2x.php?lv=10">
时,它福尔斯到默认字体。无论我多么努力地寻找解决方案,在谷歌上搜索,问ChatGPT,... SVG文件的字体一直是错误的。我发现的解决方案是使用
<object type="image/svg+xml" data="https://.../lv2x.php?lv=10">
。字体再次正确显示。