0

I cannot link any images/files with UTF character in the name.

ex. when I link image to file i get an error because of "pi%C5%ka+no%C5%BCnaw.png"

I tried to find a solution but his seems to be illuminati secret.

What is the common workaround of this?

Piotrek
  • 29
  • 1
  • 8

1 Answers1

0

The short answer is you must encode any UTF-8 text before you can use them in your HTML code for URLs, don't directly use the UTF-8 text as you did.

For the Piłka nożna.png example you posted, it should be percent encoded like this:

<img src="images/ikony/Pi%C5%82ka+no%C5%BCna.png">

Details

Use encoding to ensure the browser correctly finds the file. HTML standards are supposed to support UTF-8 percent encoding to properly handle UTF-8 values in URL.

You could use a table to manually encode character by character, but it is easier to search online for a free online encoder.

I just found and used http://www.url-encode-decode.com/ :

Input your original UTF-8 file name:

Piłka nożna.png

Output encoded version:

Pi%C5%82ka+no%C5%BCna.png

So I put that into your code to get a percent-encoded URL that HTML requires:

<img src="images/ikony/Pi%C5%82ka+no%C5%BCna.png">

But do not just input and convert everything into these online converters. If you had input the entire URL images/ikony... you would notice forward slashes seem to get percent encoded too. The reason we choose not to encode / as %2f is:

The / is a reserved character. It's not equivalent to %2f. If you need the slash without it's defined meaning, you'd use the encoded form.

Source: Why Does url-encoding the first slash after the domain break the url?

Since we are using forward slash for its intended, defined meaning, to mean a directory separator, we leave it as / without changing it.

clarity123
  • 1,956
  • 10
  • 16