移动设备上的图像损坏

Question

我的一张图片显示图片链接损坏，但仅限于移动设备。在我所有的桌面浏览器中，即使调整浏览器窗口的大小，图像仍然显示。 <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 类和文件路径的图像都没有问题？这个/实际上是做什么的？

Answer 1

通过将“/”（或“右括号”）添加到 img 标记的末尾，您正在验证它是否适用于 XML 或 XHTML。 HTML 不需要结束括号（它在 HTML 中是可选的，代码可以以任何方式工作），但 XML/XHTML 确实需要它。

由于您的移动浏览器没有显示没有括号的图像，但正确显示了带有括号的图像（并且您的 PC 以两种方式显示），这很可能意味着您的移动浏览器正在使用 XML/XHTML 解析代码（其中“/”是必需的）并且您的 PC 正在 HTML 中解析它（代码可以使用或不使用“/”）。

希望这有助于澄清！如果您不理解我所说的或想澄清的内容，请发表评论:)