Any idea how to use, in Next.JS 11, the new blur placeholder from Image component as announced on https://nextjs.org/blog/next-11#image-placeholders ?
<Image
src={banner}
alt={name}
layout="responsive"
width={1920}
height={675}
quality={100}
placeholder="blur"
blurDataURL={bannerBlurHash} // Here bannerBlurHash code as data url ?
priority
/>
Cheers,
I built a quick utility to generate the data URL for a blurhash from an input image and to play with the blurhash parameters. The resulting data URL can be used as Next.js Image's blurDataURL
(Still a work in progress, but it's functional)
I just have created a custom hook that solves this problem. It's here.
You just will need to do something like this:
const [blurData] = useNextBlurhash(bannerBlurHash);
And then pass the blurDatato your image
You need a backend service that generates a blurHash for every dynamic image.
I don't think there's an easier way then generating a canvas with something like BlurHash's typescript client then turn the canvas to dataURI with .toDataURL().