Displaying images in webpage without src URL

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