How to display Base64 images in HTML
I'm having trouble displaying a Base64 image inline.
How can I do it?
<!DOCTYPE html>
<html>
<head>
<title>Display Image</title>
</head>
<body>
<img style='display:block; width:100px;height:100px;' id='base64image'
src='data:image/jpeg;base64, LzlqLzRBQ... <!-- Base64 data -->' />
</body>
</html>
Solution 1:
My suspect is of course the actual Base64 data. Otherwise it looks good to me. See this fiddle where a similar scheme is working. You may try specifying the character set.
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>You can try this Base64 decoder to see if your Base64 data is correct or not.
Solution 2:
You need to specify the correct Content-type, Content-encoding and charset.
Like
data:image/jpeg;charset=utf-8;base64,
according to the syntax of the data URI scheme:
data:[<media type>][;charset=<character set>][;base64],<data>
Solution 3:
If you have PHP on the back-end, you can use this code:
$image = 'http://images.itracki.com/2011/06/favicon.png';
// Read image path, convert to base64 encoding
$imageData = base64_encode(file_get_contents($image));
// Format the image SRC: data:{mime};base64,{data};
$src = 'data: ' . mime_content_type($image) . ';base64,' . $imageData;
// Echo out a sample image
echo '<img src="' . $src . '">';