Parcel: How to import an image from any attribute (like data-srcset)?

[maximelebreton]

Hello, and thanks for the amazing work!

I'm using lazysizes, and I need to set my images in a data-srcset attribute, but...

this is working:
<img src="./my-image.jpg" /> => <img src="/dist/17539e2fd72aed3524af42508d6.jpg />

and this is not:
<img data-srcset="./my-image.jpg" /> => <img data-srcset="./my-image.jpg" />

Couldn't find an answer in the documentation...

Thank you!

[brandon93s]

Hello @maximelebreton,

srcset support was added in #681 but has not been released in a NPM version yet. However, the completed feature addition only checks for srcset and not data-srcset which lazysizes is expecting. Will submit a quick PR to add support!

[dawsbot]

Hi @brandon93s, I tried the srcset method, which indeed bundled in the image with parcel. But this created the problem where the native html browser handled the fetching of my image, not lazysizes.

So with srcset, it looks and behaves the exact same way as src from all I can tell. Yet when I use data-src like the lazysizes docs suggest, it does not get bundled with parcel.

• MacOS Chrome Version 69.0.3497.100 (Official Build) (64-bit)

[brettinternet]

With the lazysizes library the problem is that parcel doesn't support the data-src attribute from what I can tell, just the src img attribute. (see simple pattern for lazysizes)

[bronze]

same issue as brettinternet and dawsbot, trying to implement lazy-loading with parcel and these two just dont play well together due to data-src.
Tried going the way this guy kind of solved it with a _noscript_ after the img element but the data-src image filename stays the same, so it'd really have to be a script run after parcel.
Hoping you guys give this some love.

edit: @brettinternet @dawsbot
Just tested https://github.com/kwasniew/parcel-plugin-lazy and apparently it solves this.