Image display error on Github pages - Jekyll used

user_16102838 0
Viewed 203

I want to host a simple blog site with Github pages, using Jekyll. In a post I want to display images. For this, I added an image.html file, inside _includes folder, in the root of the project directory.

I built a HTML structure in the image.html file, like so:

<figure class="image" style="display: flex; flex-direction: column; align-items: center; justify-content: space-between">
<img src="https://raw.githubusercontent.com/Ritobrato{{include.baseurl}}/gh-pages/_posts" alt="{{ include.description }}">
<div style="padding-top: 10px"></div>
<figcaption>{{ include.description }}</figcaption></figure>

Next, I added a new markdown file for a post in the _posts directory, in the root. I'm trying to include an image in the .md post file like so:

{% include image.html url="/images/trek1.jpg" description="This is a trek image" %}

However, after commit and code push to GitHub repo, GitHub pages fails to display the image. Click here to see the image display error. Link to my code on Github repo:- https://github.com/Ritobrato/testBlog

After reading all similar questions on stackoverflow, it seems to be a file linking issue. Please help! Thanks

jekyll github-pages github ruby-on-rails ruby
1 Answers

The src attribute on your img tag looks problematic (doesn't point to an image or use include.url):

src="https://raw.githubusercontent.com/Ritobrato{{include.baseurl}}/gh-pages/_posts"

I can't be sure where you want to point this, but since this is a Jekyll site and you are passing url to your include, I'd say it should be:

src="{{ site.baseurl }}{{ include.url }}"

Alternatively, if you don't need to use a figure element, you could add the image within your Markdown file rather than using an include:

![This is a trek image]({{ site.baseurl }}/images/trek1.jpg)
user_54775610
Related