Lazysizes: data-srcset with filenames containing spaces breaks parsing

[ClemensSchneider]

When using filenames that contain whitespace (which may easily occur when customers upload files with unexpected filenames) parsing of data-srcset breaks.

E.g. data-srcset="http://localhost/uploads/images/test (1).jpg 320w, http://localhost/uploads/images/test (1).jpg 480w"

-> 'Failed parsing 'srcset' attribute value since it has an unknown descriptor.'

[ClemensSchneider]

Well.... One second after filing the bug I realized that this seems to be an issue with chrome only.. The exception is not raised from lazysizes but from chrome.. So I guess you are not able to do something about it. :)

[ClemensSchneider]

And I should URL-encode the URLs - so closing this issue...

[vedam]

Got the same error in console. Annoying.
What do you mean by "URL-encode the URLs" and how can I avoid chrome showing this for every image loaded?

[aFarkas]

You can fix this by not using white spaces in your URL. These characters are not allowed

[vedam]

hmmm. Yes. But I scripted my img-elements with:

    'data-bgset': `
      ${filename}-100.jpg 100w,
      ${filename}-500.jpg 500w,
      ${filename}-900.jpg 900w,
      ${filename}-1100.jpg 1100w,
      ${filename}-1300.jpg 1300w,
      ${filename}-2000.jpg 2000w
    `

so whitespaces are needed for the different sizes?

[ClemensSchneider]

The output of ${filename} should not contain any whitespace. This is what aFarkas meant.

[kylehotchkiss]

Protip if anybody else lands here, make sure your srcsets have commas :)