[Solved] html – Pictures not showing up on Heroku?

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 ? It works perfect locally so I don’t really understand why it doesn’t when it’s deployed on Heroku ?

I’ve also looked up every other solution that stackoverflow has to offer and nothing worked for me. Any help is really appreciated

Here is the order of my folders/files (folders are capitalized):

-RESUMEAPPCOPY
  -home.html
  -portfolio.html
  -index.php
  -aboutme.html
-PUBLIC
  -IMG
  -JS
  -CSS

Code for image:

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

Whenever I inspect the element on Heroku it says :

Failed to load resource: the server responded with a status of 404 (Not Found)

and where the picture is supposed to be I have the typical broken image link picture

Enquirer: Erv Noel

||

Solution #1:

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 pngin 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.

Respondent: zeantsoi

Solution #2:

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!

Respondent: CBP

Solution #3:

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)

Respondent: Nick Tomlin

Solution #4:

The only answer that hits the nail right on the head: Heroku is case-sensitive!

Took me half a day to figure that out!

Respondent: Ad Rienks

Solution #5:

Well , whenever your Web-page’s contain HTML, CSS and JavaScript , so follow just 2 steps :

1) Make one file give name as index.html (keep evreything in it) ex:script,stylesheet & body.

2) Now, change these file, copy and paste these same file but change domain to index.php

Then deploy on a Heroku , Keep your images downloaded in one folder with index.html

Hence this method will help you to deploy your Web-Pages

Respondent: Aamir M Meman

Solution #6:

In summary, to properly load the images:
1) Use relative url path relative to index.html
2) image file extension needs to be png instead of jpg, and write it in lower case, eg: “cat.png”

Respondent: Lucy Su

Solution #7:

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.

Respondent: Christian Reyes

Solution #8:

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 ??

Solution #9:

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.

Respondent: Jan Stefaniak

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.