Package Exports

next-image-blur
next-image-blur/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-image-blur) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Next-Image-Blur

A function that returns the blur data url of a dynamic image in Next.js

pnpm add next-image-blur

Example Page

import { getBlurDataUrl } from "next-image-blur";
import Image from "next/image";
import Link from "next/link";

const ImageList = [
  { src: "/1.png", alt: "1" },
  { src: "/2.png", alt: "2" },
  { src: "/3.png", alt: "3" },
  { src: "/4.png", alt: "4" },
];

export default function DynamicPage() {
  return (
    <div className="p-10">
      <Link href="/dynamic">
        <h1 className="text-4xl font-bold">Dynamic</h1>
      </Link>
      {ImageList.map(async (image, index) => {
        const blurDataURL = await getBlurDataUrl(image.src);
        return (
          <Image
            width={400}
            height={225}
            key={index}
            src={image.src}
            alt={image.alt}
            placeholder="blur"
            blurDataURL={blurDataURL}
          />
        );
      })}
    </div>
  );
}

Result

dyanmic images Dynamic Images

next-image-blur

Package Exports

Readme

Next-Image-Blur

How To Use?

Result