png image does not get embedded in HTML output - ruby

Question

I changed the html "formatter" to embed my image using the following code:
#builder.div(:id => 'image') do
#builder << '<div style="float:center";><img SRC="/home/abc/cert-image.png" ALT="Image"> </div>'
end
The HTML file has the following tag but there is no encoded image inside the HTML page.
div id="image"><div style="float:center";><img SRC="/home/abc/cert-image.png" ALT="Image">
Now if I open this in a browser (Chrome), it does not show me the image. If I change this path above on my local laptop and point to an image, it works (i.e displays it correctly).
What am I missing ?

Answer 1

/home/abc/cert-image.png is a relative path from your HTML file. Nothing is wrong with the html or the formatter, but your path is likely wrong.
Try clicking where the image should be and opening the URL to the image in a new window. That will give you the absolute URL to where the img tag is pointing, and you can fix/debug from there.
EDIT
Ignore that, I found the error in your formatter:
#builder.div(:id => 'image') do
#builder << '<div style="float:center;"><img SRC="/home/abc/cert-image.png" ALT="Image" /> </div>'
end
EDIT 2
Since you just want to base64 encode the image with a data uri, you can do this:
require 'base64'
file = File.open("/home/abc/cert-image.png", "rb").read
b64 = Base64.encode64(file)
Then in your formatter:
#builder.div(:id => 'image') do
#builder << '<div style="float:center;"><img SRC="data:image/png;base64,' + b64 + '" ALT="Image" /> </div>'
end