html - Pictures not showing up on Heroku?

Question

I deployed my static HTML website to Heroku using this tutorial (http://www.lemiffe.com/how-to-deploy-a-static-page-to-heroku-the-easy-way/) and my pictures won\'t show up ?

Answer 1

Heroku is case sensitive with images so make sure all your images are set to lowercase names.

Referencing from the frontend view "catPicture.png" won't work but "catpicture.png" will work. It's a big quirk! Took me hours to solve this.

Answer 2

You are giving an absolute path to the image:

/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG

The image works locally, but cause this directory exists on your local machine; it does not exist on Heroku.

You need to use a path that is relative to the directory being served by Heroku / your server:

/../PUBLIC/img/PennUnitedWebsite.PNG (this assumes that your link exists in an HTML file in the RESUMEAPPCOPY directory)

Answer 3

If the image has a large size it will not load on the Heroku on a free version.

You can resize the image in an image editor (ie: paint) to reduce the size but it will also reduce quality.

Then push by the following commands

git add .
git commit -m "resize"
git push heroku master

It should work

Answer 4

I had the same problem and found the problem to be the capitalized file type ('.PNG'). I believe Heroku is searching for files without any .toLowerCase() function applied. Which means you must request an exact match between your markup and your file with capitalization being important.

This wasn't a problem on my local node / express server but became an issue after deploying to Heroku. Some of my images were showing up but others were getting 404 errors (i.e. the ones with capitalized file types). The smart thing to do is to always make your file types are lower case.

I changed this:

<img src="public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

To this:

<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

I hope this helps anybody that came across this issue as it confused me for at least an hour. Good luck!

Answer 5

I had similar problem recently on Windows OS. Pictures loaded properly when tested localy, but on heroku some of the pictures were loading while others where not. And pictures were in the same folder! My paths and script were correct, but as others mentioned it was a case-sensitivity problem. I renamed the files, uploaded again but it didn't help. Why? Because changing the letter case is not recognized as real change for git on windows. To properly load newly named files i did those steps (all commands can be found at heroku tutorial pages):

1. Destroy heroku app and make a new one
2. Delete .git folder from your directory
3. Create new git remote for your app
4. Push all your files again

This way, heroku files will have names of files the way you like. Worked for me.

Answer 6

Your <img> tag is pointing to an absolute path that exists on your local filesystem, but does not exist for your Heroku app. Instead, provide a relative path (relative to the HTML file invoking the <img> tag, that is) to your image asset, commit the change to version control, then redeploy to Heroku.

Assuming that your public directory is actually nested within the resumeappcopy directory, the following path should work:

<img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

UPDATE:

Note that the cited asset URL points to an asset with the file extension PNG in uppercase. However, the file's actual file extension is png – in lowercase (see here). Your local filesystem is probably insensitive to case when looking up a resource – but Heroku is not. You'll need to ensure that you're properly invoking the correct casing for resources when you deploy to Heroku.