Next/Image placeholder image
Unanswered
Common Nighthawk posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
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?
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](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
You need to read this:
https://nextjs.org/docs/app/api-reference/components/image#placeholder
https://nextjs.org/docs/app/api-reference/components/image#placeholder
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
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â€.
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](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
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](https://cdn.discordapp.com/embed/avatars/3.png)
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?
The placeholder prop does not take a url right? Only base64, “blur†or “empty?
![Avatar](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
Yes
I'm not sure if there is onLoading prop either.
![Avatar](https://cdn.discordapp.com/guilds/752553802359505017/users/510480545160101898/avatars/d79065c9729b5a6a29940dc491a6f34e.webp?size=256)
Yi Lon Ma
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](https://cdn.discordapp.com/avatars/678259999201427466/1936f7e8963ff0f800f5eb4b43bc833c.webp?size=256)
Clown
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](https://cdn.discordapp.com/guilds/752553802359505017/users/510480545160101898/avatars/d79065c9729b5a6a29940dc491a6f34e.webp?size=256)
Yi Lon Ma
by placeholder I meant the shimmer animation
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
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. 👌ðŸ¼
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](https://cdn.discordapp.com/embed/avatars/3.png)
Common NighthawkOP
I have a related follow up question if any one is interested:
https://nextjs-forum.com/post/1157355108095500328
https://nextjs-forum.com/post/1157355108095500328