Images not displaying after deploying to Vercel

[larrisim]

Hi everyone,

I’ve deployed my Next.js site to Vercel, but none of the images are showing up. I’ve double-checked the image paths, and they appear to be correct (public/images/), but the images still don’t render on the live site.

Has anyone encountered a similar issue, or could point me to what I might be missing in my configuration? Any help would be greatly appreciated.

Thank you!

What it is supposed to display:

What it shows:

[pawlean (Pauline P. Narvas)]

Hi, @larrisim! Welcome to the Vercel Community.

Can you share your site with us?

A few quick things to verify:

1) Image paths must start with /

Paths should begin at the site root — don’t include public and don’t use relative paths.

// ✅ Correct
<img src="/images/photo.jpg" alt="Photo" />

// ❌ Incorrect
<img src="public/images/photo.jpg" alt="Photo" />
<img src="./images/photo.jpg" alt="Photo" />

2) Prefer the Next.js <Image /> component

It handles optimization, sizing, and caching for you.

import Image from 'next/image'

<Image
  src="/images/photo.jpg"
  alt="Photo"
  width={500}
  height={300}
/>

3) Confirm filenames + extensions

Make sure the exact filename and extension matches what’s in your public folder. Case-sensitive on most deployments.

4) Confirm files are actually deployed

Double-check that the images are committed + pushed to the branch that Vercel is deploying from.

5) Use the browser devtools

Open Console + Network → look for 404 requests to your image paths.

Let us know how you get on!

[larrisim]

UPDATE:

I fixed it by enabling Git Large File Storage (LFS) in the project settings.

Thank you for the help!

[pawlean (Pauline P. Narvas)]

Thanks for sharing what worked for you! Glad it works