Search code examples
htmllinuximagegithubgithub-pages

Image not displaying on github pages though displays when running off my local machine

First off, the first question asked on here, so apologies for anything I get wrong.

Secondly, I have checked countless times for answers both on stacked and off. Before explaining the issue, I have tried capitalizing the JPG but it still shows the picture when it's typed in lowercase jpg on my local server when in google-chrome index.html file is running. I have also tried removing the ../ from the src attribute, though it doesn't display images on either github pages or from my local server, it displays the image on my local server when the ../ is used.

Display from running google-chrome index.html from the terminal

img_google_chrome_index.html

Display from github pages

img_github_index.html

What could be the issue/ solution to displaying the image on GitHub pages? I have given it a few hours to see if it loads in and nothing by the way.

This is the snippet of code of VSCode.

img_code_snippet

Thanks!

EDIT/UPDATE: SO, the issue was as simple as I was not uploading the images to the GitHub repo. Effectively when I was trying to load an image on my html document, the src was searching for an image file that simply wasn't there (Was only on my local machine at this point, once I committed/pushed the images file to the GitHub repo the issue was resolved.. Right under my nose.

Mental note: Check the remote repo for what files it currently contains to prevent future headaches as this one. Thanks for the help though!

Solution

  • If you're trying to say that your image doesn't load it's mostly because the code can't locate the file, go to the folder where the image is located, drag the image to open a new chrome or safari page and when that is complete copy the link that pops up into the src in your html.