November Papa Mike

    parcel-plugin-data-src

    1.0.1 • Public • Published

    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

    Install

    npm i parcel-plugin-data-src

    DownloadsWeekly Downloads

    66

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    7.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • arnellebalane