Nextjs Data URLs for blurDataURL

Question

With NextJS 11, we can use Image component with a blur placeholder. If we want to use it with dynamic image we have to use blurDataURL which is a Data URL.

I would like to get my original image and make it smaller like 10x10 px. When I try to use an already created other image that is in my public folder with fs.readFileSync('http://localhost:3000/1blur.png','base64') but I got this error Error: ENOENT: no such file or directory, open 'http://localhost:3000/1blur.png' and when I try to open the file it's working in my navigator.

So, I have 2 questions :

• Why do I have an error ?
• How can I dynamically transform my original image into 10x10 blured img that I can use with Data URL ?

Thanks !

Answer 1

you can write your own custom fun and use you placeholder image as an svg src for that. i achived by doing this

export default function TestComponents({bannerImage}) {
  const styles = ['bg-primary', 'bg-blue'];
  const newImageSrc = bannerImage.toString().replace(/[()]/g, '');
    const convertImage = (w, h) => `
  <svg width="${w}" height="${h}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <linearGradient id="g">
        <stop stop-color="#333" offset="20%" />
        <stop stop-color="#222" offset="50%" />
        <stop stop-color="#333" offset="70%" />
      </linearGradient>
    </defs>
    <rect width="${w}" height="${h}" fill="#333" />
    <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
    <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
  </svg>`;

  const toBase64 = (str) =>
    typeof window === 'undefined'
      ? Buffer.from(str).toString('base64')
      : window.btoa(str);

  return (
    <div
      
      className="bg-white rounded-lg md:space-x-6 space-y-6 text-center shadow-lg  group my-4  hover:-translate-y-3 eas-in-out duration-500 cursor-pointer"
    >
      <div className="relative">
        <Image
          src={newImageSrc}
          alt="Picture of the author"
          layout="responsive"
          placeholder="blur"
          width={700}
          height={475}
          className="rounded-t"
          blurDataURL={`data:image/svg+xml;base64,${toBase64(
            convertImage(700, 475)
          )}`}
        />
</div>
</div>
)
}

Answer 2

As per NextJS docs, you can use the Shimmer effect as blurDataURL which will basically generate an svg with linear gradient color and a nice animate pulse on top of it.

here is an example:

https://github.com/vercel/next.js/blob/canary/examples/image-component/app/shimmer/page.tsx