为什么Image标签不接受#src?

时间:2016-03-15 04:52:38

标签: html tags

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

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

2 个答案:

答案 0 :(得分:3)

img elementsrc属性要求有效的受支持图像文件的绝对或相对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

答案 1 :(得分:1)

#(hash)字符是需要对url进行特殊编码才能被认为是安全的字符。 img html元素要求src属性url对其起作用是安全的,因此错误。

这通常通过URL编码来解决,它使用&#34;%&#34;来替换不安全的ASCII字符。后跟两个十六进制数字。

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

我希望这会有所帮助。