Lazysizes: Failed parsing 'srcset' attribute value since it has an unknown descriptor.

[nerijusgood]

Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate "/media/1023/waves.png?mode=crop&width=320"

The url are generated via umbraco crop tool. How can I get this working?

[aFarkas]

You habe to provide the full srcset and data-srcset to let me See what is wrong.

[nerijusgood]

<img
   class="LazyLoad"
   data-sizes="auto"
   data-src="@imageUrl"
   data-srcset="@imageUrl 1280w,
   @imageUrl.GetCropUrl(width:320, imageCropMode:ImageCropMode.Crop) 320w.
   @imageUrl.GetCropUrl(width:320, imageCropMode:ImageCropMode.Crop) 480w,
   @imageUrl.GetCropUrl(width:320, imageCropMode:ImageCropMode.Crop) 768w,
   @imageUrl.GetCropUrl(width:1024, imageCropMode:ImageCropMode.Crop) 1024w,
   @imageUrl 1280w"         src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

Console:

main.js:4073 Failed parsing 'srcset' attribute value since it has an unknown descriptor.
(anonymous) @ main.js:4073
(anonymous) @ main.js:3786
run @ main.js:3758
main.js:4073 Dropped srcset candidate "/media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&width=320"

Actual html in the browser:

<img 
   class="lazyautosizes LazyLoad-loaded"
   data-sizes="auto"
   data-src="/media/1026/katexpress1-i-sol-17_stor.jpg" 
   data-srcset="/media/1026/katexpress1-i-sol-17_stor.jpg 1280w,
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=320 320w.
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=320 480w,
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=320 768w,
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=1024 1024w,
   /media/1026/katexpress1-i-sol-17_stor.jpg 1280w" 

   src="/media/1026/katexpress1-i-sol-17_stor.jpg"
   sizes="409px" 
   srcset="/media/1026/katexpress1-i-sol-17_stor.jpg 1280w,
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=320 320w.
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=320 480w,
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=320 768w,
   /media/1026/katexpress1-i-sol-17_stor.jpg?mode=crop&amp;width=1024 1024w,
   /media/1026/katexpress1-i-sol-17_stor.jpg 1280w">

[aFarkas]

Compare:

@imageUrl.GetCropUrl(width:320, imageCropMode:ImageCropMode.Crop) 320w.
@imageUrl.GetCropUrl(width:320, imageCropMode:ImageCropMode.Crop) 768w.

[Sandeep3005]

@nerijusgood @aFarkas I am facing the same issue using npm package react-photo-gallery.
whats is the solution here you

are talking about

[ProNotion]

Do you think this might be because it doesn't like the encoded ampersands in the url?

[aFarkas]

In case of @nerijusgood it was the same image url with two different valid descriptors.

[c9mbundy]

Having similar issues with srcset and image urls that use query-strings and markup using media-queries (also for use with Umbraco) and not sure what I'm doing wrong.

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

at: 492: if(srcset) { elem.setAttribute('srcset', srcset);} else { ...

This is the markup using data-srcset:

<img class="lazyload" data-sizes="auto" data-srcset="/path/image.jpg?anchor=center&mode=crop&width=400&height=250&rnd=131900294760000000 [(max-width: 400px)] | /path/image.jpg?anchor=center&mode=crop&width=768&height=250&rnd=131900294760000000 [(max-width: 768px)] | /path/image.jpg?anchor=center&mode=crop&width=1200&height=350&rnd=131900294760000000 [(max-width: 1200px)] | /path/image.jpg?anchor=center&mode=crop&width=1920&height=500&rnd=131900294760000000"></img>

But this similar background-image mode using data-bgset markup works (with bgset plugin):

<div class="lazyload" data-sizes="auto" data-bgset="/path/image.jpg?anchor=center&mode=crop&width=400&height=250&rnd=131900294760000000 [(max-width: 400px)] | /path/image.jpg?anchor=center&mode=crop&width=768&height=250&rnd=131900294760000000 [(max-width: 768px)] | /path/image.jpg?anchor=center&mode=crop&width=1200&height=350&rnd=131900294760000000 [(max-width: 1200px)] | /path/image.jpg?anchor=center&mode=crop&width=1920&height=500&rnd=131900294760000000"></div>