Loading wrong image
Unanswered
Navid Nourani posted this in #help-forum
I have a weird problem!
Sometimes Next.js loads another image that exists on the page instead of the image that I used.
As you can see in the first attached image there is an image on the page, but when I click on the image url it loads a different image(Load right one)
I see this problem randomly, and on random components!
Sometimes there aren't any problem on the page!
Next.js version 14.0.4
Sometimes Next.js loads another image that exists on the page instead of the image that I used.
As you can see in the first attached image there is an image on the page, but when I click on the image url it loads a different image(Load right one)
I see this problem randomly, and on random components!
Sometimes there aren't any problem on the page!
Next.js version 14.0.4
19 Replies
perhaps it's the browser that's caching the image? have you tried opening the network tab to see if the browser actually requested the resource?
Yes I checked it
Request returns correct image!
Request returns correct image!
that's.. odd
tried doing shift+f6 to force reload the page?
Yes
After ctrl + F5 everything works well
But can I tell every visitor to do that? 😔
After ctrl + F5 everything works well
But can I tell every visitor to do that? 😔
Can anyone help? 🙃
Is it possible to be related to the sharp package?
@Navid Nourani Is it possible to be related to the sharp package?
try setting unoptimized props on the
<Image /> and see if it load correctly?Thanks for your approach
But we need to keep them optimized
We have lots of image on the page
But we need to keep them optimized
We have lots of image on the page
yes I know, if it load correctly with unoptimized which mean it may be something wrong with sharp
Thanks Ray!
I'll check it
I'll check it
Thanks @Ray
It seems it's from the sharp
Do you have any suggestion to fix it?
I want to downgrade it to find fine version!
It seems it's from the sharp
Do you have any suggestion to fix it?
I want to downgrade it to find fine version!
@Navid Nourani Thanks <@743561772069421169>
It seems it's from the sharp
Do you have any suggestion to fix it?
I want to downgrade it to find fine version!
ah not sure. maybe look for their github issue or try different version
Than you so much
It was a great help
I'll let you know if I found the way
It was a great help
I'll let you know if I found the way
I have the same issue on my local, as I know we don't have Sharp on local, so is it possible that the issue be from Next.js optimization process?!
When I turned off optimization everything works correctly!
@Siberian
As an update!!!!!
I opened one of images that had problem in a new tab
As you can see there is a wrong image that Next.js returned!!!
You can check right one here: https://demo.staging.pubnito.info/_next/image?url=%2Fimages%2Fsubjects%2Fplaceholder%2F1.png&w=384&q=75
I opened one of images that had problem in a new tab
As you can see there is a wrong image that Next.js returned!!!
You can check right one here: https://demo.staging.pubnito.info/_next/image?url=%2Fimages%2Fsubjects%2Fplaceholder%2F1.png&w=384&q=75
@Siberian