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:
I see that I have the correct url in
, but it never shows
Sep 15, 2021, 1:10 PM
Sep 15, 2021, 1:12 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):
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.

Was this answer helpful?