如何使用 Markdown 和 Redcarpet Gem 在我的 Rails 应用程序中渲染图像？

Question

我在 Rails 中创建博客，我决定使用 Redcarpet 在 Markdown 中生成博客内容。问题是我无法渲染图像。

我尝试了以下 markdown 语法： ![test](/image.png)

我也尝试过使用 html 图片标签： <img src="/image.png">

我什至尝试过嵌入 Ruby 图像标签： <%= image_tag "image.png"%>

我的图片正确地位于 app/assets/images 文件夹中。它与 Redcarpet 中的选项或我的路径名有关吗？使用我在网上找到的示例，我使用了以下辅助方法

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 

我的 show.html.erb 文件如下所示：

<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

我能够找到解决方案。我花了很多时间尝试那些不起作用的教程，所以要小心。你最好的资源是 Redcarpet docs 和 Paperclip docs。

基本上，您需要使用回形针 gem 创建一个指向图像的外部链接，并将其插入到 markdown 表单中，如下所示：

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

流程如下：

1. 安装并实现 redcarpet 以呈现降价
2. 安装并实现回形针以存储图像并创建可用于降价的外部链接。
   • 注意：我创建了一个单独的“图像”模型来存储图像，但您可以将图像附加到现有模型，例如帖子。我更喜欢创建一个单独的图像模型并让每个实例化图像存储一个图像。根据我的经验，当尝试将多个图像附加到单个实例化对象（例如“帖子”）时会有点混乱。
3. 从图片中获取链接。为了做到这一点，我在我的 rails 应用程序中创建了一个图像显示页面，然后使用该页面查看不同的图像大小及其各自的 url：

在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>

上面的代码将显示如下内容：

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. 将上面显示的链接复制并粘贴到markdown中，如下所示：

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

Answer 2

你见过how to extend redcarpet to support a media library part 2 他们说要添加图像 im markdown 你必须做![my avatar](http://lol.cat/1p) 它会输出<img src="http://lol.cat/1p" alt="my avatar"/>

我希望这会有所帮助。