We're using a Rest endpoint that returns an actual image like so:
#image = RestClient.get('http://example.com/api/v1/scopes/12345/icon', headers).body
And the response is something like:
�PNG
���
IHDR���������H�۱���PLTE������� ��/��>��M��\��j��y������������������������������������������5��J��c�����������������3��i��������������:��Z��z�����������C��e��������������.��V��~���������(��U����������#��r�����K��|����������
��B��w���������+��f����*����E��������O������������T�������<����������F����������b��1�܀�����0����?�� �֟��N��S���������L�������������W��������m������s��������;��l��k��%�ڑ�����o��n����4��������`�����_�����؊���ْ�����$�����"�ڜ�������ց��d��������������!�ڥ��g�����������x��I�����և����X���ن�����H��,�ۿ����������p��)�����#��������D��}����h��8�ݝ��������2�ܳ��[������'��t��9��q��a������]��������6��������{�����������������
��u����-��7��P�����A��^����������������������R����=��Y��Q��&�ڼ�����G��v���بxi���=�IDATx���a�����ݳm�����3�L
We want to Base64 encode this and display it on a View in our Rails app:
<%= image_tag(Base64.encode(#image)) %>
However it seems that the Base64 is expecting us to Open a file and pass that... e.g.
<%= image_tag(Base64.encode(File.open(#image).read)) %>
But this API returns the actual image...
Tried using send_data as well...
Base64.encode64(send_data(RestClient.get('http://example.com/api/v1/scopes/12345/icon', headers).body, disposition: 'inline'))
But then just sends the image to the browser and bypasses our view...
How can we Base64 encode and display this image on our View?
Converting the binary data to base64 and passing that as data source isn't enough on its own. This would produce:
<img src="asdf...sdf==" />
Which isn't a valid source.
You have to create an data URI:
<%= image_tag("data:image/png;base64,#{Base64.encode64(#image)}") %>
This assumes your data has a MIME type of image/png. You could make this dynamic, but you have to extract the MIME type from the file or the extension somehow.
You might also be able to leave out the MIME type, since it's optional for data URIs. I'm not sure how the webbrowser would react to this though:
<%= image_tag("data:;base64,#{Base64.encode64(#image)}") %>
You could also create a helper for this. The asset pipeline already has a helper asset_data_uri. However since you fetch your images dynamically they are not part of the static server assets you might not be able to use it.
Related
I am trying to make a quiz app and I am using the MEAN stack.
my server will send an object containing details pertaining to the questions - answers, image, question text. I wish to send a link to the ejs file which will then display the image referenced by that link.
I googled around to find some material on this issue but was unable to find any which address this topic.
I tried a few different method and the one below worked:
1) Add the link to the image in the object to be passed by the server
var objCard = {
QuestionText:"What is the indicated sign?",
ImageLink: "/assets/images/dummy.jpg"
}
2) Inside the ejs file use <%= %> from within the img tag
<img src="<%= objCard.ImageLink %>">
I am displaying an image obtained from a database (stored as a long blob) in an img tag using the following method:
<img src="http://localhost:3000/show_image/265" />
The show_image function takes the image data from the database and renders it to the img tag using the send_data method.
When applying Fancybox onto the img tag, the data is displayed as BLOB data not the image..
Can anyone suggest a reason why? Or how I can solve this?
1) You have to apply fancyBox to the links (not the images) and the structure should be like this -
<a class="fancybox" href="big_image"><img src="small_image" /></a>
Example - http://jsfiddle.net/CYCeM/.
Well, it is actually possible to have only images, but then you have to use "data-fancybox-href" attribute to specify the large one - http://jsfiddle.net/6ZSWB/
2) Looks like the script would not be able to guess the content type from your hrefs. You have to either -
a) Create links having extension, e.g., "http://localhost:3000/show_image/265.jpg"
b) Set content type for fancybox, example - $('.fancybox').fancybox(type : 'image');
setting :type => "image/jpg" fixed the issue. I looked up the MIME content types and realised it was incorrectly written.
I was playing around with basic4android and and tried to create a simple webserver. Everything fine but somehow I didn't manage to send an image as binary file. I found the problem and everything is ok now but in the meantime I was desperate and thought I could send a binary file as text coded in base64. I am still busy with that idea but cannot find proper information how a valid http response would look like with a base64 encoded image.
I guess it should look similar to something like this:
HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: lengthofthefollowingdata
dataofimagecodedinbase64
Can someone post a proper working example?
Do the standard browsers accept images coded in base64?
There is no base64 encoding in HTTP responses. It would be possible (but useless) to define it as new Transfer-Coding or Content-Coding.
lets take the $base64string var as example loading in it and image file by this way:
$base64string = base64_encode(file_get_contents("image.jpg"));
first u got to do is set the content type by this php code:
header("Content-Type: image/jpeg") //if your data is format jpeg
if your data is stored as base64 so you will have to decode it by this code:
$decoded_data = base64_decode($base64string);
then all you have to do is write the decoded data by an echo.
echo $decoded_data;
Optionally: if you want to insert an image in HTML or CSS u dont have to decode the base64 string... example:
HTML IMG TAG:
<img src="data:image/jpeg;base64,<?php echo $base64string; ?>" alt="image" />
CSS INLINE BACKGROUND PROPERTY:
style="background: url('data:image/jpeg;base64,<?php echo $base64string; ?>';"
How to create automatic hyperlinks for urls in the text/string rendered on the view?
I have a page that renders user activity log and in that log/text/string there are some random urls which I want to automatically hyperlink to open in a new browser window. There is this auto_link in ruby rails, how do I use that?
text = "User xyz accessed url - http://www.something.com on 04/13/2012 00:13:18GMT"
<%= "#{Text}" %>
I want this rendered with a hyperlink to the url. The URL could be anything anywhere in the text.
Use auto_link like this:
<%= auto_link(text) %>
If you want the generated links to open new browser windows (or tabs) add the option like so:
<%= auto_link(text, :html => { :target => '_blank' }) %>
As mentioned by pjumble in the comments, auto_link is no longer a part of Rails core as of Rails 3.1, this gem brings it back: https://github.com/tenderlove/rails_autolink Thanks pjumble!
For faster parsing, try https://github.com/vmg/rinku
require 'rinku'
Rinku.auto_link(text, mode=:all, link_attr=nil, skip_tags=nil)
Also one often need more filters than just linking, for example Youtube embedded videos. For this use: https://github.com/dejan/auto_html
How do I display the image in a view?
The documentation says:
<%= image_tag formatted_photo_path(#photo, :jpg) %>
This is not what I want.
I just want to display an image on a view I don't care about the url.
E.g., Avatar.
Do I need to write a path to the directory or is a method already made?
/public/images/avatar/id
Thank you
Does the example above not render something like this to the view?
<img src="/path-to-generated-image.jpg"/>