parcel-plugin-data-src
v1.0.1
Published
ParcelJS plugin to bundle resources defined in data-* attributes
Downloads
10
Readme
parcel-plugin-data-src
ParcelJS plugin to bundle resources defined in data-src
and data-srcset
attributes.
This is particularly useful when doing lazyloading of images, which doesn't
directly place the image path in the src
attribute.
Installation
$ npm install --save-dev parcel-plugin-data-src
Example
<picture>
<source
data-srcset="
./images/image-lg.webp 1000w,
./images/image-md.webp 500w,
./images/image-sm.webp 250w"
sizes="100vw"
type="image/webp"
>
<img
data-srcset="
./images/image-lg.jpg 1000w,
./images/image-md.jpg 500w,
./images/image-sm.jpg 250w"
sizes="100vw"
data-src="./images/image-lg.jpg"
src="./images/image-placeholder.jpg"
>
</picture>
By default, Parcel will only bundle ./images/image-placeholder.jpg
since it's
defined in the src
attribute.
Using this plugin, the following resosurces that are defined in data-srcset
and data-src
will also be bundled.
./images/image-lg.webp
./images/image-md.webp
./images/image-sm.webp
./images/image-lg.jpg
./images/image-md.jpg
./images/image-sm.jpg
License
MIT License