How to use the Next.js Image Blur
6 repliesLast updated: Jun 17, 2021
Hey all! Does anyone have an example of using the new NextJs image blur with images from Sanity?
I've never tried it before but I think it should just work as long as you have the sanity cdn listed in your image domains in
https://nextjs.org/docs/api-reference/next/image#src
https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/placeholder.js
next.config.js
https://nextjs.org/docs/api-reference/next/image#src
https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/placeholder.js
i believe with dynamic assets you need to supply a blurhash to the image component too (i could be wrong)
oh right, yeah
If src is an object from a static import and the imported image is jpg, png, or webp, then blurDataURL will automatically be populated. Otherwise you must provide the blurDataURL property.have you tried using the
lqipas the blurhash? (didnt know it existed until now)
this might be of interest too
https://github.com/sanity-io/sanity/issues/2074
https://github.com/sanity-io/sanity/issues/2074
ah yeah good shout on the lqip, will give that a try 🙂 thank you!
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
