How can I embed a .png file into a blank "file.html" so that when you open that file in any browser you see that image?
In this scenario, the image file is not linked to from the HTML, but rather the image data is embedded in the HTML itself.
07 Answers
There are a few Base64 encoders online to help you with this, and this is probably the best I've seen:
As that page shows your main options for this are CSS:
div.image { width:100px; height:100px; background-image:url(data:image/png;base64,iVBORwA<MoreBase64SringHere>); } Or the <img> tag itself, like this:
<img alt="My Image" src="data:image/png;base64,iVBORwA<MoreBase64SringHere>" /> The 64base method works for large images as well. I use that method to embed all the images into my website, and it works every time. I've done it with files up to 2 MB size, JPEG and PNG.
1I stumbled upon similar problem now and the solution is:
#!/usr/bin/env perl use strict; use warnings; use utf8; use GD::Graph::pie; use MIME::Base64; my @data = (['A','O','S','I'],[3,16,12,47]); my $mygraph = GD::Graph::pie->new(200, 200); my $myimage = $mygraph->plot(\@data)->png; print <<end_html; <html><head><title>Current Stats</title></head> <body> <p align="center"> <img src="data:image/png;base64, end_html print encode_base64($myimage); print <<end_html; " /></p> </body> </html> end_html A quick Google search says you can embed it like this:
<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"> But you need a different implementation in Internet Explorer.
2Use mod_rewrite to redirect the call to file.html to image.png without the URL changing for the user.
Have you tried just renaming the image.png file to file.html? I think most browser take mime header over file extension :)
2You can embed a png image like you can embed jpg images or any type of images in html from your device or from the web .
Be sure that the type of the image is png when you are saving it on your device.This is the same way but I embed it as jpg.<embed type="image/jpg" src="" width="500" height="500"> </EMBED>I want to say thanks to Stack Overflow that let us ask and answer!!!!!!!!!!!!!!!!
1You can embed images using the methods listed in other answers, such as in HTML
<img alt="My Image" src="data:image/png;base64,base64-data-goes-here" /> or CSS
div#my-image { width:150px; height:100px; background-image:url(data:image/png;base64,base64-data-goes-here); } For Base64 encoding, on Linux I use the standard base64 tool with wrapping turned off, like this:
base64 -w 0 my-image.png and copy/paste the output text verbatim.
