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?

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

Do you mean https://github.com/bundlesandbatches/next-sanity-image ?

Yes

Is your issue? https://github.com/bundlesandbatches/next-sanity-image/blob/main/src/useNextSanityImage.ts#L156-L162

But you say it’s set, so probably not.

It is also hard to debug and test

I’ve tried to block the main image in my network dev tools tab, but I’m not sure that might break it

Hmm, seems like there is only an issue in Firefox, maybe it loads it different based on timings

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

associated GROQ query here as well: https://github.com/ndimatteo/HULL/blob/main/data/queries.js#L33-L43

I came up with my own solution, but I wish I had looked at HULL first 😅

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.

Get started for free Explore the demo

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

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?