CODEWITHSUNDEEP
next.jsvercelnextjs-image
Polikuc
Polikuc

Reputation: 51

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.

How it should be

This is what I have on test.

But deploy I get this :

How it is

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

Upvotes: 3

Views: 2804

Answers (2)

Sanjeev
Sanjeev

Reputation: 39

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!

Upvotes: 0

Robin Thomas
Robin Thomas

Reputation: 4146

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

Upvotes: 2

Related Questions