Github pages with Jekyll not showing images in .md post

user_13665131 0
Viewed 521

I created a simple blog with Jekyll/Github Pages. The directory tree is organized like this:

  • _posts
    • post1.md
  • assets
    • Untitled.png
    • Untitled1.png
  • _config.yml
  • index.md

In post1.md I embed images by:

![Untitled](/assets/Untitled.png)
![Untitled1](/assets/Untitled1.png)

The Github preview works just fine, but in my website it can't show up images. Please help me with this problem, i spent 2 days trying to fix it but still not working. Images in Github preview and Show on website

jekyll github-pages markdown github
1 Answers

2 things to edit

The problem is, maybe you haven't setup URL in _config.yml file that's why incomplete URL making some troubleshoots. You need 2 things to do!

  1. URL Set-up
  2. Image Tag Set-up

URL Setup

In _config.yml just add 2 lines:

#_config.yml

url: 'https://your-github-username.github.io/' # your main domain
baseurl: 'your-repo-name/' # if you're using custom domain keep this blank example: baseurl: ''

Now we are all set with our URL setup, now edit anchor tag or link tag in post1.md file.

Image Tag Set-up

Let's dive into your image tag which is in markdown formate like:

![Untitled](/assets/Untitled.png)

edit into this:

<img src="{{site.baseurl | prepend: site.url}}assets/Untitled.png" alt="Untitled" />

<!-- OR -->

<img src="{{ "/assets/Untitled.png" | prepend: site.baseurl | prepend: site.url}}" alt="Untitled" />

Here:

  • {{...}} is a Liquid filter syntax
  • site.url is collecting URL from the _config.yml file
  • site.baseurl is collecting baseurl to add that after the url for GitHub Pages
  • **| prepend: ** is a filter which means site.url will be added before the site.baseurl. this tag will render this:
<img src="https://your-github-username.github.io/your-repo-name/assets/Untitled.png" alt="Untitled" />

That's it. I Guess this will help to do your work perfectly. Fact is this answer was already given by me in: https://stackoverflow.com/a/67733921/14387700

...

HAPPY JEKYLLING

user_143877000
Related