CODEWITHSUNDEEP
htmlgiturlgithubgithub-pages
user11524995
user11524995

Reputation:

Why can't I display images when using github pages?

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.

Upvotes: 1

Views: 679

Answers (2)

kasraprime
kasraprime

Reputation: 1

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

Upvotes: 0

Karmakip
Karmakip

Reputation: 98

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>

Upvotes: 1

Related Questions