Deployed websites images dont get displayed because of <Image /> Wrapper
Unanswered
Singapura posted this in #help-forum
SingapuraOP
Hi guys, I deployed a website I made with nextjs to cpanel and most of my images are not getting displayed.
What I noticed is that the images with the <Image /> wrapper are the ones that don't get displayed.
This is from the network tab when I checked the request:
URL of successfully served image:
URL: https://website.com/mobilePanesB.webp
URL of failed image:
https://website.com/_next/image?url=%2Fprovincetown-wallpaper.jpg&w=640&q=75
does anyone know how to fix this?
What I noticed is that the images with the <Image /> wrapper are the ones that don't get displayed.
This is from the network tab when I checked the request:
URL of successfully served image:
URL: https://website.com/mobilePanesB.webp
URL of failed image:
https://website.com/_next/image?url=%2Fprovincetown-wallpaper.jpg&w=640&q=75
does anyone know how to fix this?
5 Replies
SingapuraOP
I added
And ran the build again, now when I deploy, all images display, however it is kind of slow
images: {
unoptimized: true,
},And ran the build again, now when I deploy, all images display, however it is kind of slow
Anybody have a fix for this?
Toyger
how you deployed it on cpanel? afaik it only possible to deploy static site there
and from my tests <Image> not working on static sites. you should use <img>
upd: looks like in static site, you need to define custom loader https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#image-optimization
and from my tests <Image> not working on static sites. you should use <img>
upd: looks like in static site, you need to define custom loader https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#image-optimization
@Toyger how you deployed it on cpanel? afaik it only possible to deploy static site there
and from my tests <Image> not working on static sites. you should use <img>
upd: looks like in static site, you need to define custom loader https://nextjs.org/docs/pages/building-your-application/deploying/static-exports#image-optimization
SingapuraOP
hmm interesting, so the optimizing has to be handled by something else like Cloudinary
thats a bit unconvenient but I guess I will look into that