Can someone explain why file names like this returns an error?
<img alt="" src="uploads/#hje-bubble-wrap-factory.jpeg">
Can someone explain why file names like this returns an error?
<img alt="" src="uploads/#hje-bubble-wrap-factory.jpeg">
The src
property of an img
element expects either an absolute or relative URL to a valid, supported image file. URL syntax defines anything following the #
to be a fragment identifier.
Thus, in your example only uploads/
is considered the file path, while the #hje-bubble-wrap-factory.jpeg
segment is parsed as a fragment identifier.
A fragment is a designated section within an HTML or XML document, so a browser will try to parse the URL path (uploads/
) and then locate the fragment (#hje-bubble-wrap-factory.jpeg
) within that file. However, since there isn't a file at uploads/
, the HTTP response is likely HTML from the server (or nothing at all), which can't be displayed as an image ;)
If your file name actually contains a #
, you can encode it, however using special characters isn't recommended for filenames.
Note though that a fragment identifier is perfectly valid within the src
property. You can use that trick for all kinds of fun things with SVGs.
The # (hash) character among others are characters that require special encoding for the url to be considered safe. The img
html element requires the src
attribute url to be safe for it to work, hence the error.
This is usually solved with URL encoding, which replaces unsafe ASCII characters with "%" follows by two hexadecimal digits.
<img alt="" src="uploads/%23hje-bubble-wrap-factory.jpeg">
I hope this helps.