why would my image not show up in production?

[Elindo586]

Summary

This code works fine in development... I think it was working fine in production too, but I just noticed a missing image... when I test it in development is fine, when I test it in my localhost npm build is fine, but on the live site I can't view the image no matter what browser I use... the code is here line 93:
https://github.com/Elindo586/nextprojectb/blob/main/pages/products/electrical/servo-drives/luminary-drive.js

Additional information

No response

Example

No response

[icyJoseph]

Looks like the Github repository is private.

Do you have a link to the production site, maybe it is possible to debug from there.

Try to look at errors in the console or network tab, that might give you a hint at what's happening.

[Elindo586]

Hello!!! sorry I kind of forgot about this one. I made the repo public... can you see it? the error is still there, pretty much I can't see the image when is live.

[icyJoseph]

No worries. Case sensitivity matters.

Change this:

src="/images/electrical/luminary-drive.png"

To:

src="/images/electrical/Luminary-Drive.png"

To clarify on what's happened here:

• Windows file system treats file and directory names as case-insensitive. FOO.txt and foo.txt will be treated as equivalent files.
• Linux file system treats file and directory names as case-sensitive. FOO.txt and foo.txt will be treated as distinct files.

You are likely developing on Windows, so the image works fine, even though you are referring to it in all lowercase. When you deploy, the environment used is Linux, and now the all lowercase name points at a different file.

[Elindo586]

I see... would you know why it didn't change the name to luminary-drive.png ?? the repo has it with capital letters, but I did change in the project and uploaded it to github, but for some reason it doesn't show it that way.

[icyJoseph]

Do this:

git mv public/images/electrical/Luminary-Drive.png tmp.png
git mv tmp.png public/images/electrical/luminary-drive.png

and then add, commit and push again

[Elindo586]

So... I had to take it out from private to public, and I tried to re-publish, but I don't think it is taking it from Github in Vercel?

I put it back to private in Github to see if Vercel would pick it up.... but nothing is showing yet.

Vercel has been very slow today with other pushes in Github

[icyJoseph]

The infra upon which Vercel sits is AWS, as much more of the internet. AWS has been having a rough day.

• https://health.aws.amazon.com/health/status
• https://www.vercel-status.com/

[Elindo586]

So... I am working on some other changes for the same site, but I can't even log into Vercel. I am going to give a day see if they are doing better..

[spence709]

Summary

This code works fine in development... I think it was working fine in production too, but I just noticed a missing image... when I test it in development is fine, when I test it in my localhost npm build is fine, but on the live site I can't view the image no matter what browser I use... the code is here line 93: https://github.com/Elindo586/nextprojectb/blob/main/pages/products/electrical/servo-drives/luminary-drive.js

Additional information

No response

Example

No response

Unfortunately, I don't have access to the codebase, so I can't provide a comprehensive solution. However, I can suggest some common troubleshooting tips that may help resolve missing images on your live site.

File Path: Double-check the file path for the image in your code. Ensure the path is correct and the image file is in the expected directory on your live server.

Image Hosting: Ensure the image is hosted correctly on your live server. Sometimes, there may be an issue with file permissions or how the image is served.

Network Connectivity: Ensure there are no network-related issues that could be preventing the image from loading on your live site. Check for firewalls or content delivery network (CDN) configurations that may be blocking the image.

Caching: Clear your browser cache and try accessing your live site again. A cached version of the image may be causing the issue.

Build Process: Review your live site's build process. Ensure that images are properly included and optimized during the build phase.

Deployment Process: Review your deployment process to ensure that the image files are uploaded correctly and accessible to your live server.