Next.js Discord

Discord Forum

Next/Image placeholder image

Unanswered
Common Nighthawk posted this in #help-forum
Open in Discord
Avatar
Common NighthawkOP
Hey’all 👋🏼

Is it possible to choose which url to use as placeholder for an Image tag?

I’m using Contentful and they have an API to return a small image in one color for a certain image url. But, I do not want to set it in the dataBlurUrl prop because Next adds some blur effect on it.

Is there a way that while image is loading I show this single color image instead?

13 Replies

Avatar
SupremeDeity
Avatar
Common NighthawkOP
Thanx. I read it, and I can’t find any information on how to show an alternative image when main image is loading, without having Next/Image blur it.

If I use the blurDataUrl prop, the image gets blured.

I can’t use a base64 image because the image urls are dynamic, and can’t use “placeholder” package because I’m building the project as “standalone”.
Avatar
SupremeDeity
Ok it may sound stupid, but like, a placeholder that itself needs to be loaded from the internet would be pretty useless :/
Btw placeholder itself is the prop im talking about, not blurDataUrl
Avatar
Common NighthawkOP
I was thinking of having a super small 1x1 pixel image which goes really fast to download as placeholder.

The placeholder prop does not take a url right? Only base64, “blur” or “empty?
Avatar
SupremeDeity
Yes
I'm not sure if there is onLoading prop either.
Avatar
The ORM Hopper
okay what you can do is: set the width and height to 1x1 and show any loader then listen to onLoadingComplete event on Image component. When it gets loaded, hide the loader and change width to expected width and height
Avatar
SupremeDeity
Hmm that may work but remember if for some reason the other image loads first it might cause some issues and also if you're having network issues while loading the app, this might look weird.
I would always recommend using a placeholder that doesnt depend on another image, but in the end the decision is upto you.
Avatar
The ORM Hopper
by placeholder I meant the shimmer animation
Avatar
Common NighthawkOP
I ended up prefetching the 1x1 images when I receive list of items and their url to hero images on Contentful by using query parameters ?w=1&h=1.

Then when showing single item I use the 1x1 image (which by now should be cached) as blurDataUrl.

Only drawback is that I’m fetching way more images (1x1) then what user might actually view. But because the images are a couple of bytes each I think it’s ok. 👌🏼
Avatar
Common NighthawkOP
I have a related follow up question if any one is interested:
https://nextjs-forum.com/post/1157355108095500328