Why my images is nextjs not showing up in production?

[bleedingAyush]

Hi, I just deployed my nextjs app with netlify, and everything works fine for now except the images.

Here is my website link: https://thunderous-cheesecake-04e6e8.netlify.app/

And I am importing and using images like this:

import manualImg from "../../public/manual.jpg";

            <Image src={manualImg} alt="" className="rounded" />

[SamO]

Hi, welcome back to the forums. Did you check your console?

[mckinleyatlas]

I’m having this same problem. The image shows up on vercel and not netlify https://deft-tiramisu-edef15.netlify.app/

[SamO]

Hi welcome! The images on your site are loading just fine everything loads fine with the exception of the google map but you can see this in your console. Are you still experiencing this issue?

[mckinleyatlas]

Yeah I am. The background images load just fine but not the images which are different on Next

[mckinleyatlas]

GitHub - atlasmac/lynn_ching here is the repo

https://lynn-ching.vercel.app/ here is it on vercel working. I would prefer to continue using netlify

[nathanmartin]

Just dropping some comparison screenshots to make the difference obvious:

Netlify

Vercel

[mckinleyatlas]

Thanks for adding the comparison

[mckinleyatlas]

This is the same repo hosted on AWS amplify

[mckinleyatlas]

I was able to get the image to show up by adding

 images: {
    unoptimized: true,
  },

to next.config.js and then just using the img tag instead of Next’s optimized Next/Image