Are your Nextjs images loading on your local machine but not on vercel? Here’s why.
A few days ago, I finally quashed a bug that I had been trying to fix for days. For some reason, icons on my nextjs site were not found on the vercel deployed version but worked perfectly on the local version.
It turns out case sensitivity for image paths matters a lot in vercel but not so much in localhost.
For instance an icon has a path of “/images/sportsIllustration.svg” but I used “/images/sportsillustration” as the value for the src prop in the Image component. Now this works fine on my local environment but will always result in a 404 error when deployed.
It’s a silly mistake to make, yes, but stuff like this can keep you debugging for days.
Get Laju’s stories in your inbox
Join Medium for free to get updates from this writer.
Here are some other reasons your image files my not be loading when deployed:
- Image assets are not placed in the public folder: vercel uses the public folder as the default directory for static assets, so make sure your image assets are placed in the public folder.
- You are using relative paths: if you are using relative paths to reference your image assets make sure they are correct based on the file location especially when used in an embedded route.
- Cache issues: Your browser sometimes caches assets and as a result, it may look like the image works fine on your local version while, in reality, it’s not. This makes clearing your cache (“npm cache clean — force”) a reasonable first step in debugging this issue.
- Your vercel settings have changed: It may be the case that the organisation you work for is using a different configuration from the default so check with whoever is in charge and make the relevant changes.
When debugging Next.js applications running on Vercel, it’s important to pay close attention to details because of The disparity that exists between Vercel deployments and local development environments.
