Rendering Images in Jekyll Minimal Mistakes

This post is for troubleshooting why my images are not rendering on the Minimal Mistakes site.

The minimal mistakes jekyll assets/images folder images are all either .png or .jpg files

The post & file on including a standard image says:

The preferred way of using images is placing them in the /assets/images/ directory and referencing them with an absolute path. Prepending the filename with {{ site.url }}{{ site.baseurl }}/assets/images/ will make sure your images display properly in feeds and such.

In my config.ymlfile I added the lines:

url		 : "sarahtanja.github.io"
baseurl	 : "/lab-book"

HTML:

<img src="{{ site.url }}{{ site.baseurl }}/assets/images/githuboctocat.svg" alt="">

… nothing

Kramdown:

![alt]({{ site.url }}{{ site.baseurl }}/assets/images/githuboctocat.svg)

…

Kramdown without ‘ wrap’:

![img-png](https://sarahtanja.github.io/lab-book/assets/images/githuboctocat.svg)

We have a winner!

Image that fills page content container by adding the .full class with:

HTML:

<img src="{{ site.url }}{{ site.baseurl }}/assets/images/githuboctocat.svg" alt="" class="full">

Kramdown with %raw%:

![alt]({{ site.url }}{{ site.baseurl }}/assets/images/githuboctocat.svg)
{: .full}

isn’t showing in the code fence?

Kramdown:

![img-jpg](https://sarahtanja.github.io/lab-book/assets/images/githuboctocat.svg)

We have another winner!

---

Supposedly, you can embed images in three ways… here I’m just trying to get markdown or html to work (not messing with liquid galleries yet)

Via Markdown

absolute path - doesn’t render in Typora or Jekyll page, does show in GitHub repo preview

![img-svg](https://github.com/sarahtanja/lab-book/blob/master/assets/images/githuboctocat.svg)

relative path - this shows in Typora, but nowhere else

![img-png](..\assets\images\githuboctocat.png)

Via HTML

<figure style="width: 80px" class="align-center">
  <a href="/assets/images/githuboctocat.svg" title="octocat" alt="octocat">
  <img src="/assets/images/githuboctocat.svg" alt=""></a>
  <figcaption>octocat</figcaption>
</figure>

octocat

This doesn’t show locally, on GitHub preview, or on Jekyll site