Rails3：在视图中渲染内存中图像

Question

我有一个 Rails 应用程序，控制器内存中有一个由 spark_pr 生成的 png 文件。

@pngfile << Spark.plot( [47, 43, 24, 47, 16, 28, 38, 57, 50, 76, 42, 20, 98, 34, 53, 1, 55, 74, 63, 38, 31, 98, 89], :has_min => true, :has_max => true, 'has_last' => 'true', 'height' => '40', :step => 10, :normalize => 'logarithmic' )
@user=User.all.first

我想在我的视图中渲染这个 png 文件，即 app/views/users/show.html.erb，它具有由 Rails 脚手架生成器生成的标准内容，其中显示 @user 的各种属性。

如何在我的视图中渲染此内存中文件 (@pngfile)？我不想保存该文件，甚至也不想提供该文件的临时 URL。我已经在 HTML 页面上看到过这种做法，其中内嵌图标是从二进制 blob 渲染的，所以我知道这是可能的。但我无法弄清楚 Rails 视图助手的神奇咒语使这成为可能。

----------- 编辑：更多信息 -------------------------

此网站提供了有关如何嵌入 URL 的更多信息。文件夹图标的代码如下所示：

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

我将这段代码嵌入到我的视图中，它适用于 Chrome、Firefox 和 IE9。

所以我尝试用我的火花图来做这件事。

在我的 Rails 控制器中，我这样做了：

    @pngfile = Base64.encode64 Spark.plot( [47, 43, 24, 47, 16, 28, 38, 57, 50, 76, 42, 20, 98, 34, 53, 1, 55, 74, 63, 38, 31, 98, 89], :has_min => true, :has_max => true, 'has_last' => 'true', 'height' => '40', :step => 10, :normalize => 'logarithmic' )

在我看来，我尝试了几种不同的技巧，

<%=image_tag "data:image/png;base64,"+@pngfile %>

<%=image_tag "data://image/png;base64,"+@pngfile %>

<img src=<%="data:image/png;base64,"+@pngfile %>  ></img>

<img src=<%=raw("data:image/png;base64,"+@pngfile) %>  ></img>

除了第二个之外，它们都失败了，并且它在 Chrome 和 Firefox 中有效，但在 IE9 中无效。 第一个应该可以工作，但是 image_tag 帮助程序的代码默认在我的 URL 前面添加“/images/”，即使它是直接数据 URL。我知道这一点是因为我尝试在不同的选项卡中查看图像，但失败了。但是当我去掉“/images/”部分时，它工作得很好。 我不知道为什么第二个有效。我只是一时兴起尝试了一下。 第三个失败了，因为看起来字符串的某些部分由于特殊字符而被破坏。我尝试在第四个中使用原始字符串，但它也不起作用。

在这一点上，我很困惑。我是否尝试对 image_tag 进行猴子修补，以便它不会为嵌入图像的 data: URL 预先添加内容，或者我是否对字符串做一些有趣的事情，以便它像视图示例 3 或 4 一样正确呈现？

Answer 1

我刚刚遇到了类似的问题。就我而言，我在 application_helper 中定义了 base64_image：

def base64_image image_data
  "<img src='data:image/png;base64,#{image_data}' />".html_safe
end

因此在您的情况下，您只需使用它而不是 image_tag：

base64_image(@png_file)