爲什麼圖片標籤不接受＃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"> 

我希望這有助於。