Menu
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> 
736
Images encoded with Base64 can be embedded in HTML by using the <img> tag. This can help to increase the page load time for smaller images by saving the browser from making additional HTTP requests.
Use the img Tag to Display Base64 Image in HTML We can specify the URL of the image in the src attribute of the img tag. We can display base64 images by providing the information about the image in the src attribute. We need to define the accurate content type, content-encoding, and charset in the src attribute.
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.
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
