Skip to content
👀 Our most exciting product launch yet 🚀 Join us May 8th for Sanity Connect
Get help on Slack

Implementing Next.js Sanity Image using a Blurred Placeholder with Sanity as a Loader

11 replies
Last updated: Sep 16, 2021
Does anyone have a working example of “Next.js Sanity Image” using a blur placeholder with Sanity as a loader?
Sep 15, 2021, 1:08 PM
This is my code:
<Image
      src={nextSanityImage.src}
      loader={nextSanityImage.loader}
      width={width}
      height={height}
      layout="responsive"
      placeholder="blur"
      blurDataURL={nextSanityImage.blurDataURL}
      alt={alt}
      priority={priority}
    />
I see that I have the correct url in 
blurDataURL
, but it never shows
Sep 15, 2021, 1:10 PM
Sep 15, 2021, 1:12 PM
Yes
Sep 15, 2021, 1:12 PM
Sep 15, 2021, 1:14 PM
But you say it’s set, so probably not.
Sep 15, 2021, 1:15 PM
It is also hard to debug and test
Sep 15, 2021, 1:17 PM
I’ve tried to block the main image in my network dev tools tab, but I’m not sure that might break it
Sep 15, 2021, 1:18 PM
Hmm, seems like there is only an issue in Firefox, maybe it loads it different based on timings
Sep 15, 2021, 1:26 PM
If you didn’t want to use this plugin, you can check out my custom solution that does this (blur up): https://github.com/ndimatteo/HULL/blob/main/components/photo.js
Sep 15, 2021, 6:56 PM
Sep 15, 2021, 6:56 PM
I came up with my own solution, but I wish I had looked at HULL first 😅
Sep 16, 2021, 8:15 AM

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?