0

I've this weird problem with JavaScript when I create an image element and set the source attribute. The file name let's say is "áéíóú.jpg" and when I set it as src It get:

src = %C3%A1,%20%C3%A9,%20%C3%AD,%20%C3%B3,%20%C3%BA.jpg".

I set the attribute with:

img.src = src;

And in the debug session src is:

src = "á, é, í, ó, ú.jpg"

IMAGE OF THE PROBLEM

var img = document.createElement('img');
img.className+="materialboxed";
img.src = src;
img.setAttribute('width', '175');
img.setAttribute('height', '150');
Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199
Daniel Campos
  • 55
  • 1
  • 14
  • The [`%` encoding](https://en.wikipedia.org/wiki/Percent-encoding) is normal and how URLs support spaces and most of Unicode. – Related: [Unicode characters in URLs](https://stackoverflow.com/questions/2742852/unicode-characters-in-urls) – Also, [UTF-8](https://en.wikipedia.org/wiki/UTF-8). – Jonathan Lonowski Mar 16 '18 at 22:58
  • What's the issue? The spaces? – Lee Kowalkowski Mar 16 '18 at 22:59
  • I get the conversion to UTF-8 and the %-sign notation, but I don't get where the commas and the spaces are coming from. – kshetline Mar 16 '18 at 22:59
  • What exactly is meant by "when I set it as src"? I don't see any issue [in my fiddle](https://jsfiddle.net/pzs14L6s/1/) – Lee Kowalkowski Mar 16 '18 at 23:00
  • I would expect the escaped sequence to be "%E1%E9%ED%F3%FA.jpg" - how did you generate it? – Lee Kowalkowski Mar 16 '18 at 23:03
  • try to use https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent – Anon Mar 16 '18 at 23:07
  • 1
    @LeeKowalkowski That would appear to be [ISO 8859-1](https://en.wikipedia.org/wiki/ISO/IEC_8859-1) (Latin 1). [That isn't common with percent-encoding.](https://stackoverflow.com/questions/912811/what-is-the-proper-way-to-url-encode-unicode-characters) – Jonathan Lonowski Mar 16 '18 at 23:07
  • @JonathanLonowski doh, yes! So therefore I expect the escaped sequence to be "%C3%A1%C3%A9%C3%AD%C3%B3%C3%BA.jpg" – Lee Kowalkowski Mar 16 '18 at 23:12
  • 1
    @JonathanLonowski, yes, which is why it's confusing when it says "The file name let's say is "áéíóú.jpg" and when I set it as src It get:" - So I don't know if the question is "Why is it encoded?" or "Where did the commas and spaces come from?" – Lee Kowalkowski Mar 16 '18 at 23:16
  • 1
    @LeeKowalkowski Ah. Missed that mention at the top. – Jonathan Lonowski Mar 16 '18 at 23:17
  • If you're also questioning the spaces and commas... Does the `src` variable perhaps get its value, at least in part, from an Array? If the accented characters start out in one, `[ 'á', 'é', 'í', 'ó', 'ú' ]`, and you either convert that to or combine that with a string (such as `accents + '.jpg'`), the default behavior will be to `.join(', ')` the values, which would result in `'á, é, í, ó, ú'`. – Jonathan Lonowski Mar 16 '18 at 23:25

1 Answers1

0

you can use decodeURIComponent()

img.src = decodeURIComponent(src);

example:

decodeURIComponent('%C3%A1,%20%C3%A9,%20%C3%AD,%20%C3%B3,%20%C3%BA.jpg');

resulting:

"á, é, í, ó, ú.jpg"
Taufik Nur Rahmanda
  • 1,862
  • 2
  • 20
  • 36