NextJS Images are not rendered on Vercel

Question

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

Robin Thomas · Accepted Answer · 2023-09-26 23:50:57Z

2

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:

Rename your images in public directory to use .png extension
Update the src in <Image> component to use .PNG extension

answered Sep 26, 2023 at 23:50

Robin Thomas

4,3162 gold badges19 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Polikuc Over a year ago

Thank you very much. I didn't know that. That solved it.

Sanjeev · Accepted Answer · 2024-06-24 11:09:54Z

in case of array

const images = [{src: '/image.jpg', alt: 'testing', width: 180, height:37}];

return (
    <div className="relative">
      <div className="flex justify-center items-center">
        {/* Step 3: Display the current image */}
        <Image
          className="relative"
          src={images[currentIndex].src}
          alt={images[currentIndex].alt}
          width={images[currentIndex].width}
          height={images[currentIndex].height}
          priority
        />
      </div>
      {/* Step 4: Navigation Controls */}
      <button onClick={prevImage}>Previous</button>
      <button onClick={nextImage}>Next</button>
    </div>
  );

still the local using 'npm run dev' works just fine, when deploying to Production 'vercel --prod' has missing images.

Please let me know what am I doing wrong!

Collectives™ on Stack Overflow

NextJS Images are not rendered on Vercel

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related