Insert local image into a blog post with octopress

Question

I setuped an octopress blog for my github and now I want to add new posts. I need to add images to my posts, which I tried doing like so:

{% img /images/image.png 'alt' %}

This will only work on the root url of the app. When I view the blog post alone, the url looks like http://example.com/blog/2013/06/11/title/ so the url /images/ won't work.

I then tried this:

 {% img {{root_url}} /images/image.png 'alt' %}

And it won't work either. But a link like this:

[Link!]({{ root_url }} /images/image.png")

works perfectly.

I would like a bit of help, Thanks a lot.

Answer 1

Ok, I found the solution. Instead of using the image tag plugin, just use regular html like such:

<img src="{{ root_url }}/images/image.png" />

Answer 2

I had the same problem, except I just used Markdown:

![a brick](../images/a_brick.png "A brick")

It feels kinda hackish though. I just wish there was a way to simply reference the image title, and it would just work (like with the asset pipeline in rails).

Anyway, as an explanation, if we looked at a (simplified) version of the directory structure, we'd find this:

.
├── a-fluid-world
    └── a-fluid-world.html
├── artists-or-scientists
├── assets
├── hello-world
├── images
    └── a_brick.png
├── lazy-in-ruby-2-dot-0
├── ruby-is-great
└── stylesheets

So your posts are in directories, Which contain the actual HTML. If we go back a directory with ../, we end up in the root directory, and then we can go into images and retrieve the image we want.