4

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

1 Answer 1

3

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

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.