问题描述
我的一张图片显示图片链接损坏,但仅限于移动设备。在我所有的桌面浏览器中,即使调整浏览器窗口的大小,图像仍然显示。 <img>
标签的文件路径是正确的,没有针对图像的 CSS 或 JS,除了字面上只有 width
和 margin
CSS 属性。搜索拼图大约一个小时后,我终于弄清楚是什么解决了问题,而不是导致问题的原因。
<img src="/path/to/image.png" alt="image alt tag">
最终解决了什么问题:
<img src="/path/to/image.png" alt="image alt tag" />
(注意标签末尾的 /)
为什么这个小/有这么大的不同?为什么所有其他具有完全相同的 CSS 类和文件路径的图像都没有显示任何问题?这/实际上是做什么的?
解决方法
通过将“/”(或“结束括号”)添加到 img 标签的末尾,您正在验证它是否适用于 XML 或 XHTML。 HTML 不需要结束括号(它在 HTML 中是可选的,代码可以以任何方式工作),但 XML/XHTML 确实需要它。
由于您的移动浏览器没有显示没有括号的图像,而是正确显示了括号(并且您的 PC 以两种方式显示),这很可能意味着您的移动浏览器正在使用 XML/XHTML 解析代码(其中“/”是必需的)并且您的 PC 正在将其解析为 HTML(代码使用或不使用“/”的地方)。
希望有助于澄清!如果您不明白我所说的内容或想要澄清的内容,请发表评论:)