NextJS Images are not rendered on Vercel

I have a small issue on my project right now. I try to deploy on Vercel my Next.Js project. I rendered some images from the public folder, but those images that render perfectly on test does not render when deploy on Vercel.

I'm using the App Router. I first try to create a folder inside my src/images but the deployement said : Module not found: Can't resolve './images/thumbnail/Popup.png'

Then I searched online and I saw that the best way was to use the public folder. I created a 'Thumbnail' folder inside my public folder and the deployement was succesfull but the images never rendered.

This is what I have on test.

But deploy I get this :

On my page I use the Next/image that I import.

And a Image looks like this :

<Image
            src={"/thumbnail/ProductCard.png"}
            alt="Product Card"
            width={500}
            height={500}
          />

I don't know why the images does not render.

Nothing really work. I'm kinda lost right now and I don't know where I did something wrong

This is the repo :

https://github.com/Molikuc/frontend_ideas

Thanks in advance. Have a great day.

I try multiple things like importing the photo with : import image from '/thumbnail.ProductCard.png

I try creating a static/image folder

I'm assuming you are developing on Windows. The reason is because if you check your GitHub repo, you shall the files as public/thumbnail/ProductCard.PNG. Notice the .PNG extension.

On Windows, they work perfectly, because Windows treat both .PNG and .png extensions as same.

But Vercel is running on a Unix based system, and treats these extensions as differently. Hence it's trying to look for public/thumbnail/ProductCard.png, since thats what you pass to <Image> component.

<Image
    src={"/thumbnail/ProductCard.png"}
    alt="Product Card"
    width={500}
    height={500}
/>

Which it won't find. Hence why your images are not rendered on Vercel.

---

So to solve it, you can either:

1. Rename your images in public directory to use .png extension

2. Update the src in <Image> component to use .PNG extension