I’ve been running into a strange issue the past few days — my codebase works perfectly locally, but once I deploy, some images just don’t show up. A few days ago, I deployed the exact same codebase (unchanged) and everything was fine. Now it’s completely random which images load and which don’t.
This sounds like a caching or static asset issue. Here are a few things to check:
First, verify your image paths:
- Make sure all images are in the
publicfolder and referenced correctly (e.g.,/images/photo.jpgnot./images/photo.jpg) - Check that file names match exactly (case-sensitive)
Try these troubleshooting steps:
- Clear build cache - Redeploy with a fresh build by going to your project settings and clearing the build cache
- Check file sizes - Vercel has limits on static assets (50MB per file for Pro plans)
- Verify image formats - Ensure you’re using supported formats (jpg, png, webp, etc.)
If using Next.js Image component:
- Make sure you’re using the correct
srcpaths - Check if you need to configure
domainsinnext.config.jsfor external images
Quick fix to try:
Force a fresh deployment by making a small change (like adding a comment) and redeploying.
Since it was working before with the same code, this is likely a deployment/caching issue rather than a code problem.
