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