How to add a Github repository image to its Github-pages webpage?

Question

I have a Github repository with Github-Pages activated using theme: jekyll-theme-leap-day that is provided in the repository settings. I would like to add an image that is in my repository to the webpage that is created by Github-Pages. How do I do it?

I have tried:

[Figure 1](https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png)

but this markdown format only creates a hyperlink to Figure 1 in the repository. But this outcome is not what I desire. Rather, I want to show the figure in the webpage. How do I do this?

My webpage index file is located at https://github.com/JulianChia/lowerboundSARSCOV2/blob/gh-pages/index.md See line 17.

I read somewhere that I might need to amend the _config.yml file for Jekyll webpages. But according to my https://github.com/JulianChia/lowerboundSARSCOV2/edit/gh-pages/_config.yml file, it only contains a line theme: jekyll-theme-leap-day. There is nothing else in there that I could amend.

The webpage link is https://julianchia.github.io/lowerboundSARSCOV2/

I think, [This](https://stackoverflow.com/questions/14494747/how-to-add-images-to-readme-md-on-github) what you are looking for ? — Enos jeba, Mar 11 '22 at 11:32

udoyhasan · Accepted Answer · 2022-03-11T14:25:38.610

0

Instead of using this as image src

https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png

use this as image src

https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png

Remember you are trying to link an image to your site that is raw content so you have to use raw.githubusercontent.com instead of github.com

Or, If you prefer to use github.com to directly get the raw link you need to add ?raw=true after your link. For example:

https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png?raw=true

Then it will redirect you to:

https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png

That you need to put in the src attribute of the image. It is the easiest way to get the raw link for your Github file.

edited Mar 11 '22 at 14:25

answered Mar 11 '22 at 11:35

udoyhasan

1,527
5
19

Thanks. I tried adding `?raw=true` and it pointed to a new webpage. However, is there a way to show the figure on the same webpage instead of another webpage? – Julian Chia Mar 11 '22 at 14:16
Yes, when you use `?raw=true` then it redirects you to the real raw link that you can copy from the browser and put it as image src – udoyhasan Mar 11 '22 at 14:21
I've updated my answer. Hopefully, it will solve your issue and if it solves your issue don't forget to mark the answer as the answer. So the people who also want to know the same thing can also get benefited from the answer :) – udoyhasan Mar 11 '22 at 14:28
I discovered that adding a `!` prefix worked., i.e. `![Figure text](https://github.com/.url./.../../image.png?raw=true)` – Julian Chia Mar 11 '22 at 14:29
Yes `!` was needed for the markdown image tag. – udoyhasan Mar 11 '22 at 14:30
@JulianChia I thought you were only looking for the link source so I give this answer and didn't focus on the full tag :) – udoyhasan Mar 11 '22 at 14:35
1

Appreciate that you add `!` that to your answer too. I can then accept your answer. Really appreciate all your kind help. :) – Julian Chia Mar 11 '22 at 14:41
Thank you & For `` tag `[text](link)` and `![Image alt text](image_source_link)` is used for `` tag in the markdow – udoyhasan Mar 11 '22 at 14:56

How to add a Github repository image to its Github-pages webpage?

1 Answers1