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:
Hi, ! Welcome to the Vercel Community. 👋
Can you share your site with us?
A few quick things to verify:
/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" /><Image /> componentIt handles optimization, sizing, and caching for you.
import Image from 'next/image'<Image src="/images/photo.jpg" alt="Photo" width={500} height={300}/>Make sure the exact filename and extension matches what’s in your public folder. Case-sensitive on most deployments.
Double-check that the images are committed + pushed to the branch that Vercel is deploying from.
Open Console + Network → look for 404 requests to your image paths.
Let us know how you get on!
UPDATE:
I fixed it by enabling Git Large File Storage (LFS) in the project settings.
Thank you for the help!
Thanks for sharing what worked for you! Glad it works 🙂