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_ Epidemic_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/

CodePudding user response：

Instead of using this as image src

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

use this as image src

https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_ Epidemic_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_ Epidemic_trends.png?raw=true

Then it will redirect you to:

https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_ Epidemic_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.