Search code examples
jekyllgithub-pages

Images not showing in github page (but do show in md)

I created a simple GitHub webpage using Jekyll. In my blog posts (markdown files), I'm using the full image path to make sure the link won't be broken.

So for example, in the markdown file https://github.com/GilLevi/gillevi.github.io/blob/master/_posts/2022-11-14-DeiT3.md I added an image using the following code:

<img src="https://github.com/GilLevi/gillevi.github.io/blob/master/_posts/random_papers_nov22/deit3_table1.png" alt="Untitled" />

or

| ![DeiT3 training recipe](https://github.com/GilLevi/gillevi.github.io/blob/master/_posts/random_papers_nov22/deit3_table1.png) | 
|:--:| 
|Comparison of Deit3 training recipes including all hyperparameters|

The image is shown when the file is rendered in GitHub (as you can see when opening the link) but is not shown on the actual webpage: https://gillevi.github.io/posts/Deit3

Following similar questions, I double-checked the URL of the image (https://github.com/GilLevi/gillevi.github.io/blob/master/_posts/random_papers_nov22/deit3_table1.png), it exists and public.

I also made sure the URL and repository fields in the config.yml file are set correctly. I didn't find any related errors (as far as I can tell) in the log of the build and deployment job.

What am I missing here? Why are the images not shown on the website and how may I fix it? Any help will be greatly appreciated.

Solution

  • If you want to use that image then you have to use a path like

    https://gillevi.github.io/images/posts/deit3/deit3_table1.png

    or

    https://raw.githubusercontent.com/GilLevi/gillevi.github.io/master/images/posts/deit3/deit3_table1.png

    and the best practice to use image in markdown is

    ![alt text](/images/posts/deit3/deit3_table1.png)

    this will resolve that issue.