为什么图像标签不接受#作为src？

Question

有人可以解释为什么这样的文件名会返回错误吗？

<img alt="" src="uploads/#hje-bubble-wrap-factory.jpeg">

Answer 1

元素src的属性需要一个有效的、受支持的图像文件的绝对或相对 URL。URL 语法将 后面的任何内容定义为片段标识符。img#

因此，在您的示例中，仅uploads/被视为文件路径，而#hje-bubble-wrap-factory.jpeg段被解析为片段标识符。

片段是 HTML 或 XML 文档中的指定部分，因此浏览器将尝试解析 URL 路径 ( uploads/)，然后在该文件中定位片段 ( #hje-bubble-wrap-factory.jpeg)。但是，由于 处没有文件uploads/，HTTP 响应可能是来自服务器的 HTML（或根本没有），无法显示为图像；）

如果您的文件名实际上包含#，您可以对其进行编码，但不建议在文件名中使用特殊字符。

但请注意，片段标识符在属性内完全有效src。您可以使用该技巧通过 SVG实现各种有趣的事情。