1

I have a test site here that has only one image tag which I can not get to load:

https://jamie-siminoff-007.github.io/

The index file is:

<!DOCTYPE html>
<html>
  <body>
    <img src="_heart.png" alt="foo">
  </body>
</html>

This is a git page so it is completely hosted on GitHub and the repo is here:

https://github.com/jamie-siminoff-007/jamie-siminoff-007.github.io

What am I missing?

FYI, I can put in what I call the raw link as seen below for the src and it works:

https://raw.githubusercontent.com/jamie-siminoff-007/jamie-siminoff-6.github.io/master/_heart.png

but this does not seem like the correct way. Surely when GitHub made pages, they have a way for you to use relative paths.

Research

Images in github pages and relative links ... not related

https://pages.github.com ... nothing relevant

https://help.github.com/en/categories/github-pages-basics ... nothing on images

More Info.

I found that google dev tools has a neat feature where you can change the src attribute of the image and it will update the page in real time.

This is how I found out that the raw link worked.

More More Info.

I am starting to think that my GitHub pages need further configuration but I'm not sure.

I checked my configuration and I am configured to publish on the master branch which is good b.c. it is the only branch I have.

Improve this question
5
  • This is odd ... have you tried contacting github support? Commented May 26, 2019 at 1:02
  • Possible duplicate of Names starting with underscore shows errors Page doesnot exists for gh-pages branch Commented May 26, 2019 at 7:39
  • Create an empty file named .nojekyll in the root of your pages repo. Without it files/directories started with leading underscore are ignored. Or simply rename all your files without leading underscore. Commented May 26, 2019 at 7:39
  • I guess underscores require a rocket science degree to use. Commented May 26, 2019 at 16:06
  • I'm not sure it is. I learned about .nojekyll when I needed to publish Cheetah docs generated by Sphinx so I simply didn't have a choice to rename its internal files and directories. I found the solution with search. Commented May 26, 2019 at 18:00

2 Answers 2

Reset to default
1

It looks like your src gives a 404 error (file not found). For me, this src works: "https://raw.githubusercontent.com/jamie-siminoff-007/jamie-siminoff-007.github.io/master/_heart.png"

<html class="gr__jamie-siminoff-007_github_io"><head></head><body data-gr-c-s-loaded="true">
    <img src="https://raw.githubusercontent.com/jamie-siminoff-007/jamie-siminoff-007.github.io/master/_heart.png" alt="foo">
  


</body></html>

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

right ... I made a note that that worked in my Question.
Where are you looking for exactly?
In your index file, you just use the path _.heart.png this is the same as "jamie-siminoff-007.github.io/_heart.png" But your image is located here "raw.githubusercontent.com/jamie-siminoff-007/…" so you have to use this src.
It is cumbersome to use such a messy URL ... on a "normal" server you would just do _heart.png for the src ... I think it is a configuration issue.
If you host this locally or with a server you can do this on that way but this is on the servers of GitHub if I don't get you wrong so you have to use the link to the image on their server because the image and the index file aren't in the same folder
0

In case your problem has not been solved yet:

The problem is most probably due to the name of your image file _heart.png that starts with a leading underscore. The reason is because of Jekyll processing in GitHub pages that ignores files starting with underscore.

To solve it, you have two options.

  1. Rename your file.
  2. Add an empty file named .nojekyll to the root of your repository to disable this behavior (Do not use this if you are using Jekyll for your website).
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.