You need to read this:
https://nextjs.org/docs/app/api-reference/components/image#placeholder

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”.

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

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?

Yes

I'm not sure if there is onLoading prop either.

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

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.

by placeholder I meant the shimmer animation

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. 👌🏼

I have a related follow up question if any one is interested:
https://nextjs-forum.com/post/1157355108095500328