0

Can someone explain why file names like this returns an error?

<img alt="" src="uploads/#hje-bubble-wrap-factory.jpeg">
2
  • 1
    it's special character so HTML doesn't accept it in property Mar 15, 2016 at 4:53
  • Hi woninana, this question is missing some of the details we usually look for and might not be seen as high quality by the community. Without details like where else you've looked for information or the specific error you're getting, you're likely to get down votes and the question could be closed :/
    – justin
    Mar 15, 2016 at 5:49

2 Answers 2

5

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.

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.