Using data-src fails on urls containing commas

[jorngeorg]

If you have a srcset looking something like this:

https://some.domain.co/animage.jpg?rect=0,4,1936,1084&w=500&h=280&q=80&fit=crop&auto=format 500w, 
https://some.domain.co/animage.jpg?rect=0,3,1936,1086&w=1000&h=561&q=80&fit=crop&auto=format 1000w, 
https://some.domain.co/animage.jpg?rect=0,3,1936,1087&w=2000&h=1123&q=80&fit=crop&auto=format 2000w

loading will fail because it return a src image like this

1087&w=2000&h=1123&q=80&fit=crop&auto=format

[jorngeorg]

After some digging, I found the culprit to be this line https://github.com/hilongjw/vue-lazyload/blob/master/src/util.js#L74

options = options.trim().split(',')

The split expression here needs to be bit more clever, taking into account that an url can contain a comma.

[alvarosabu]

OMG, in deed is quite a problem. If you are using Cloudinary for example, the transformations in the path uses commas like this https://res.cloudinary.com/alvarosaburido/image/upload/c_scale,q_auto,w_320/v1563876252/alvaro-saburido-portfolio.png

I will create a PR for this.

[reganjohnson]

Any update on this issue? Unable to use this plugin with Cloudinary at this time.

[alvarosabu]

My PR still open tho. No news about it

[blek-id]

for a temporary solution to this is to encode the comma.

string.replace(/,/g, "%2C")

[vin-ni]

+1 I also had issues with sanity urls. They have commas when they are cropped