png图像不会嵌入HTML输出中

Question

我更改了html“formatter”以使用以下代码嵌入我的图片：

@builder.div(:id => 'image') do
   @builder << '<div style="float:center";><img SRC="/home/abc/cert-image.png" ALT="Image"> </div>'
 end

HTML文件具有以下标记，但HTML页面内没有编码图像。

div id="image"><div style="float:center";><img SRC="/home/abc/cert-image.png" ALT="Image">

现在，如果我在浏览器（Chrome）中打开它，它就不会显示图像。如果我在我的本地笔记本电脑上面改变这条路径并指向一个图像，它就可以工作（即正确显示）。

我错过了什么？

Answer 1

/home/abc/cert-image.png是HTML文件的相对路径。 HTML或格式化程序没有任何问题，但您的路径可能不对。

尝试单击图像的位置，然后在新窗口中打开图像的URL。这将为您提供img标记所指向的绝对URL，您可以从那里修复/调试。

修改

忽略这一点，我在格式化程序中发现错误：

@builder.div(:id => 'image') do
  @builder << '<div style="float:center;"><img SRC="/home/abc/cert-image.png" ALT="Image" /> </div>'
end

编辑2

由于您只想使用数据uri对图像进行base64编码，您可以这样做：

require 'base64'

file = File.open("/home/abc/cert-image.png", "rb").read
b64 = Base64.encode64(file)

然后在你的格式化程序中：

@builder.div(:id => 'image') do
  @builder << '<div style="float:center;"><img SRC="data:image/png;base64,' + b64 + '" ALT="Image" /> </div>'
end