How to render images in my Rails app using markdown and the Redcarpet Gem?

Question

I'm creating a blog in rails and I decided to use Redcarpet to generate blog content in markdown. The problem is I can't get my images to render.

I've tried the following markdown syntax: ![test](/image.png)

I've also tried using html image tags: <img src="/image.png">

and I've even tried embeded Ruby image tags: <%= image_tag "image.png"%>

My image is properly located in the app/assets/images folder. Does it have something to do with the options in Redcarpet or my path name? Using examples I found online I used the following helper method

def markdown(text)
  options = {

    fenced_code_blocks: true,
    no_intra_emphasis:true,
    lax_html_blocks: true
  }

  extensions = {
    autolink:           true,
    superscript:        true,
    disable_indented_code_blocks: true
  }

  renderer = Redcarpet::Render::HTML.new(options)
  markdown = Redcarpet::Markdown.new(renderer, extensions)

  markdown.render(text).html_safe
end 

My show.html.erb file looks like this:

<div class="container-fluid">
<h3><%= @post.title %></h3>
<%=@post.created_at.to_date%>
<p>
<%= markdown(@post.text)%>
<p>
<br>
<%= link_to 'Back to all posts.', posts_path%>
</div>

Answer 1

I was able to figure out a solution to this. I spent a lot of time trying tutorials that didn't work so beware. You're best resources are the Redcarpet docs and Paperclip docs.

Essentially you need to create an external link to your image, using the paperclip gem, and insert it into markdown form like this:

![my image](/system/images/images/000/000/004/original/1.png?1419796218)

The process looks like this:

1. Install and implement redcarpet to render markdown
2. Install and implement paperclip to store images and create external links that can be used in markdown.
   • note: I created a separate 'Image' model for storing images but you can attach images to existing models such as Posts. I prefer creating a separate image model and having each instantiated image store one image. In my experience it gets kind of messy when trying to attach multiple images to a single instantiated object such as a 'Post'.
3. Get the link from the image. In order to do this I created an image show page within my rails app and then used that page to view the different image sizes and their respective urls:

In views/images/show.html.erb:

<p> Normal image size url: <%=@image.image.url%> </p>
<p><%= image_tag @image.image.url %></p>

<p> Large image Size url: <%=@image.image.url(:large)%> </p>
<p><%= image_tag @image.image.url(:large) %></p>

The above code will display something like this:

Normal image size url: /system/images/images/000/000/004/original/1.png?1419796218

Large image size url: /system/images/images/000/000/003/medium/1.png?1419796195

4. Copy and paste the link that is displayed above into markdown like this:

   ![my image](/system/images/images/000/000/004/original/1.png?1419796218)

Answer 2

Have you seen how to extend redcarpet to support a media library part 2 they say to add a image im markdown you have to do ![my avatar](http://lol.cat/1p) and it will output <img src="http://lol.cat/1p" alt="my avatar"/>

I hope that this helps.