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

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

Answer 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!