为什么图片标签不接受＃as src？

Question

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

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

Answer 1

img element的src属性需要绝对或相对URL来支持有效的图像文件。 URL syntax定义了在#之后的任何内容作为片段标识符。

因此，在你的例子仅uploads/被认为是文件路径，而#hje-bubble-wrap-factory.jpeg段被解析为一个片段标识符。

片段是一个HTML或XML文档内的指定部分，这样一个浏览器将尝试解析URL路径（uploads/）和然后找到文件中的片段（#hje-bubble-wrap-factory.jpeg）。但是，由于在uploads/处没有文件，所以HTTP响应可能来自服务器的HTML（或根本没有任何文件），它不能显示为图像;）

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

请注意，片段标识符在src属性内完全有效。您可以使用该技巧来处理各种fun things with SVGs。

Answer 2

其中＃（散列）字符等字符需要特殊的编码才能被认为是安全的。 img html元素要求src属性url对其工作是安全的，因此也是错误。

这通常通过URL编码来解决，URL编码用“％”替换不安全的ASCII字符后跟两个十六进制数字。

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

我希望这有助于。