Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

How to use the Next.js Image Blur

6 replies
Last updated: Jun 17, 2021
Hey all! Does anyone have an example of using the new NextJs image blur with images from Sanity?
Jun 17, 2021, 9:06 AM
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 
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
Jun 17, 2021, 9:26 AM
i believe with dynamic assets you need to supply a blurhash to the image component too (i could be wrong)
Jun 17, 2021, 9:48 AM
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.
Jun 17, 2021, 9:52 AM
have you tried using the 
lqip
as the blurhash? (didnt know it existed until now)
Jun 17, 2021, 10:07 AM
Jun 17, 2021, 10:11 AM
ah yeah good shout on the lqip, will give that a try 🙂 thank you!
Jun 17, 2021, 1:59 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?