0

I am facing one problem when I am host my project to aws amplify. I successfully build a demo ecommerce project. I deploy this next js project to aws amplify. I use next/image component on my project. When I enter my site, I can see some images(Not all image) are not loaded properly. They show alt text instead. You can see this gif for understanding.

-https://media.giphy.com/media/bOekkFQdH2OVcoumwj/giphy.gif

You can see live url also- https://www.nekmart.com/

Please see the gif for understanding actual problem.

Here I host my image to aws S3. I use cloudfront also. For debugging my problem. I also deploy my project to vercel and netlify. From vercel and netlify I am not getting any kind image not loading issue.Here is those links-

Vercel link- https://nekmart-k71c.vercel.app/ Netlify link- https://remarkable-licorice-795c08.netlify.app/

But I have to use aws. Now How can I debug my problem? I can't understand actually where is the problem occured-

  1. next/image component problem- I use it in this way- <Image src={process.env.NEXT_PUBLIC_IMAGE_PATH + brand.image} width={25} height={25} alt={brand.name} />
  2. Need to setting up aws amplify properly?
  3. Need to setting up aws s3 properly?
  4. Need to setting up next config for image component.

I am confused, Which one? Please help me to debugging this problem.

Savana
  • 53
  • 1
  • 6
  • I've checked out the website and it turns out that some of your images are loading extremely slowly. (Upwards of 14s) That said, I don't think it is an issue cloudfront, or even amplify. Perhaps this will help: https://stackoverflow.com/questions/66637391/next-images-components-are-too-slow-to-appear – Atakan Atamert Oct 01 '22 at 17:06
  • Your suggested answer show me two things. 1. Have to use `sharp` 2. Have to set `priority={true}` in every component. I try it. But issue still occurred. I have another questions- why in vercel and netlify issue not occurring. – Savana Oct 01 '22 at 19:23

0 Answers0