title: Image display error on Github pages - Jekyll used
body: <p>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 <code>image.html</code> file, inside <code>_includes</code> folder, in the root of the project directory.</p>
  <p><strong>I built a HTML structure in the image.html file, like so:</strong></p>
  <pre><code>&lt;figure class=&quot;image&quot; style=&quot;display: flex; flex-direction: column; align-items: center; justify-content: space-between&quot;&gt;
  &lt;img src=&quot;https://raw.githubusercontent.com/Ritobrato{{include.baseurl}}/gh-pages/_posts&quot; alt=&quot;{{ include.description }}&quot;&gt;
  &lt;div style=&quot;padding-top: 10px&quot;&gt;&lt;/div&gt;
  &lt;figcaption&gt;{{ include.description }}&lt;/figcaption&gt;&lt;/figure&gt;
  </code></pre>
  <p><strong>Next, I added a new markdown file for a post in the <code>_posts</code> directory, in the root. I'm trying to include  an image in the .md post file like so:</strong></p>
  <p><code>{% include image.html url=&quot;/images/trek1.jpg&quot; description=&quot;This is a trek image&quot; %}</code></p>
  <p><strong>However, after commit and code push to GitHub repo, GitHub pages fails to display the image.</strong>
  <a href="https://i.stack.imgur.com/Yibh1.png" rel="nofollow noreferrer">Click here to see the image display error</a>. <strong>Link to my code on Github repo:-</strong> <a href="https://github.com/Ritobrato/testBlog" rel="nofollow noreferrer">https://github.com/Ritobrato/testBlog</a></p>
  <p>After reading all similar questions on stackoverflow, it seems to be a file linking issue. Please help! Thanks</p>