Displaying images in webpage without src URL - html

Question

Recently i learned that i can display images in a web page without referencing an image URL as follows :
<img class="disclosure" img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oIGRQbOY8MjgMAAABVSURBVBjTfc6xDcAwCETRM0rt5nbA+49j70DDAqSLsGXyJQqkVxxwNOeMiEA+waW1VuT/inrvG7wikht8UETy2ygVMjO4O8YYTf6AqrZyUwYlygAAXo+QLmeF4c4uAAAAAElFTkSuQmCC">
I had another small bmp image that i wanted to display, so i opened it in vim and the img source looke like:
When i paste this code where it needs to be pasted i only get "BMڀ"
How to i convert/paste this code properly to be used as an image source?

Answer 1

You need to encode it in Base64
http://www.motobit.com/util/base64-decoder-encoder.asp
Also you have to change (png) in...
<img src="data:image/png;base64,
according to image filetype.
Here is a little PHP function, haven't tested it.
function encode64($file){
$extension = explode(".", $file);
$extension = end($extension);
$binary = fread(fopen($file, "r"), filesize($file));
return '<img src="data:image/'.$extension.';base64,'.base64_encode($binary).'"/>';
}
echo encode64("test.bmp");
2.
function encode64($file){
$binary = fread(fopen($file, "r"), filesize($file));
return(base64_encode($binary));
}
echo '<img src="data:image/bmp;base64,'.encode64("test.bmp").'"/>';
Tested my second function... works great... http://debconf11.com/so.php

Answer 2

You can use online utilities like
http://software.hixie.ch/utilities/cgi/data/data
or
http://www.sveinbjorn.org/dataurlmaker
for the conversion.

Answer 3

To get the Base64 encoding of your image, you can use imagemagick's convert command with the INLINE: output format.
For example:
convert YourImage.png INLINE:PNG:YourImage_base64.txt
Now all you have to do in your HTML page is add <img src=" and "> around the content of the "YourImage_base64.txt" file.
Or you can directly write it all to STDOUT and add it directly at the end of your HTML file:
echo "<img src=\"$(convert YourImage.png INLINE:PNG:-)\">" >> some.html

Answer 4

The image data must be base64 encoded.