Html image src data base64

How to display Base64 images in HTML

To anyone reading this question and its answers. consider whether or not you actually need base64 encoding. There is almost never need for this in modern browsers. If you use base64 encoding, you’re adding 33% overhead to the size of the image, additional CPU and memory requirements both when encoding and decoding, cluttering up the DOM with extra data that doesn’t need to be there, and imposing stringent and inconsistent limits on sizes and resource types. Use blobs, object URLs, etc. instead.

@Brad sometimes when you need things to be self-contained, Base64 is the only option. I actually came across this page while trying to write a script to extract images from a Jupyter notebook (which saves them as Base64 PNGs) into an HTML file to be published as a report.

@Brad there’s certainly a better way to do what I’m doing, but I’m lazy and don’t care about presentation now since this is just to send to my colleauges to discuss. Besides, who doesn’t love writing complex shell one-liners to accomplish their tasks? 🙂

@StuartAitken No, that’s demonstrably incorrect. We have had object URLs for nearly a decade. developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL Please read up on this, and go back to anyone who has told you that this is an appropriate use of base64 and spread the good news that base64 is not necessary for this use case.

14 Answers 14

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.

 
Taken from wikpedia
 

You can try this Base64 decoder to see if your Base64 data is correct or not.

thankyou for taking the time to answer my question. that js fiddle simply outputs a red dot?? is that what it is meant to do?

@Christopher, yes — its a data URI for a red dot image (source: en.wikipedia.org/wiki/Data_URI_scheme). I am just pointing out that there is no apparent issue in what you are doing except perhaps actual base64 data. Use the given decoder and save decoded binary data as an jpeg file and try to open it. If it does not work then there is an issue in your base64 encoding.

I believe I have discovered the problem is when the base64 file is being uploaded every «+» seems to be removed. Which intern nullifies the jpeg. I am posting the image from a device to the server with AJAX is it possible that «+» is not passed correctly throught because it is a htmlentity?

@Christopher, «+» character can be problematic in post data. See this related SO question: stackoverflow.com/questions/1373414/…

Just used the HTML from the question above with some valid base64 data for a PNG and it works fine . this is the correct answer.

You need to specify the correct Content-type, Content-encoding and charset.

 data:image/jpeg;charset=utf-8;base64, 

according to the syntax of the data URI scheme:

stackoverflow.com/questions/13265902/… suggests there’s no header for encoding the HTTP body using base-64.

Also, stackoverflow.com/questions/7285372/… — it’s a MIME header, not an HTTP one. Can you expand on how exactly the content-encoding should be specified?

This solved the problem for me. Chrome would assume UTF-8 and show the images while Microsoft Edge would simply fail to render. Once I included the charset the images showed perfectly.

Is it possible to use input instead of img ? I want to show the value on the label or textbox, instead of an image.

First convert your image to Base64 (encode to Base64). You can do it online or with a PHP script.

After converting you will get the result as

iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEVBMTczNDg3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEVBMTczNDk3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRUExNzM0NjdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUExNzM0NzdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII= 

You have to just put it in the src of the image and define it there as it is in Base64-encoded form.

Источник

How to Display Base64 Images in HTML

Base64 encoding and Data URL go hand-in-hand, as Data URLs reduce the number of HTTP requests that are needed for the browser to display an HTML document.

In this snippet, we’ll demonstrate how you can display Base64 images in HTML.

How to Use the Tag

The tag has a src attribute and contains the Data URL of the image. A Data URL is composed of two parts, which are separated by a comma. The first part specifies a Base64 encoded image, and the second part specifies the Base64 encoded string of the image. Add also an alt attribute.

img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Now, see the full code, where we need to place the tag presented above within a element.

Example of embedding a Base64 encoded image into HTML:

html> html> head> title>Title of the document title> head> body> div> p>From wikipedia p> img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" /> div> body> html>

Convert your image to a Base64 string

html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Image to Base64 title> head> body> input type="file" id="inputImage" accept="image/*"> textarea id="outputBase64" rows="10" cols="80" readonly> textarea> script> document.getElementById('inputImage').addEventListener('change', function(event) < const file = event.target.files[0]; const reader = new FileReader(); reader.onloadend = function( ) < const base64 = reader.result; document.getElementById('outputBase64').value = base64; >; reader.readAsDataURL(file); >); script> body> html>

Источник

How to display Base64 images in HTML?

To display images encoded with Base64, you need to get the base64 encoded string and use the img element. This prevents the page from loading slowly and saves the web browser from additional HTTP requests.

Set the base64 image in the src attribute of the . Let’s say we have the following image −

For Base64, we will consider the Data URL of the image, which is placed in the src attribute. The Data URL has two parts −

• The 1 st part is the Base64 encoded image.
• The 2 nd part is the Base64 encoded string of the image.

Therefore, the Base64 of the above image −

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAw MEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGB IUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUF BQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCAAuAC8DASIAAhEBAxEB/8QAHw AAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9 AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3 ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKj pKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHw EAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3 AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygp KjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZa XmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3 +Pn6/9oADAMBAAIRAxEAPwD9U6KZM5jhd1QyMqkhV6n2r4S8f/t7+J9Y8238KaVbeH4Dwt1c4u bj6gEBF+hDfWuTEYqnhknUe59Hk3D+Oz6coYOKtG123ZK97efR7Jn3NqWqWej2rXV/dwWNsp Aaa5kWNBnpliQKsqwdQykMpGQR0Nfl54N0Hxh+1D4/TRdS168vp3t5p5Lq8laSO2RUOCF6KC5 RflHV64bwr8XfiL8FNWudO0jxDqGjy2M8kM+myOJbdZFJVwYX3JnIIzjPHWuCOZc3vOHun2WI4 FdGX1eGKi6ySbVnZJ3trv0fT5d/19pGUMuGGRXxt+zx+3D4h+I3jbRfB+veG7O5vdQk8pNR0+Vo dgVCzO8TbtxwpPyso9vT7Kr1KVaFaPNA/P8AMcsxOV1VRxKs2rqzvdf13CvyD8baX/YnjPX9Oxt +x6hcW+302SMv9K/XyvzV+JXw3u/F37VuueFbJSs2p60zlgP9WkmJXkPsqszfhXj5tBzjC297fefpv hvi4Yevi1Udo8ik/SL1f4ne/CPVT+zd+ztqnxIktopvEPiG6jttMt7gY3QIxJz3AYLK3HB2x+tefftpeDrCf xDoXxM8PgP4e8ZWiXJdBwlyEXcDjoWUqSOu5ZPQ17d8cP2mPDnww8QHwNa+AtK8UaZ4eto 7eM3zqViYRjKKpjYDC7VJ9QfSsfw78RtK/bF+Fni74e23hex8K6vpdsup6JZ2cw8p5FZs7RsUL8z BTx0mJrPlpyi8PGV2tlbqt/vOyVbG08RHO69BxjUbcpc0f4crKC5b3XKlF/eeNfsI6Q+pftGaPcIpK6f aXdy59AYmiz+co/Ov09r8+/8AgnHok3/Cz/Fl+8bILPSfskgYYKtJOjYPof3J/Kv0Er0Mvjajfuz4vjOr7 TNOX+WKX5v9Qrxf4xfsw6J8TtRn1/Tr668M+LXQKdTs3bbNhdoEiZHYAZUg4HOcYr2iiu2pThVjy zV0fKYLH4nLqyr4WbjL812a2a8noflR8aPgj40+FNxdv4jspLi2lLFdXhYywTk9y/UMfR8H2re/Z9/ZR +I/jy8ttctrm68DaOw+XV5GeK4lQgZ8mNSGYEHqSqkZwT0r9NLq1gvoGhuIY7iFsbo5VDKcHIyD 7gVLXl08spwm3d2/rqfoGL48xmKw0aXsoqpazl0t5RfX715Hn3wf+B/hv4K6XeW+hpcz3uoMsmoal fTGWe8dSxDOegxvbhQOvOTk16DRRXrxioLlirI/N61apiKjq1pOUnu2f//Z
 

Example

Let us see the complete example −

DOCTYPE html> html> head> title>Base64 Imagetitle> head> body> div> h1>Angular Tutorialh1> img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgMCAgMDAwMEAw MEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wB DAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUF BQUFBQUFBQUFBQUFBT/wAARCAAuAC8DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAA AECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0K xwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dn d4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5 ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBA QDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRo mJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJ maoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oA DAMBAAIRAxEAPwD9U6KZM5jhd1QyMqkhV6n2r4S8f/t7+J9Y8238KaVbeH4Dwt1c4ubj6gEBF+hDfWu TEYqnhknUe59Hk3D+Oz6coYOKtG123ZK97efR7Jn3NqWqWej2rXV/dwWNspAaa5kWNBnpliQKsqwd QykMpGQR0Nfl54N0Hxh+1D4/TRdS168vp3t5p5Lq8laSO2RUOCF6KC5RflHV64bwr8XfiL8FNWudO0jx DqGjy2M8kM+myOJbdZFJVwYX3JnIIzjPHWuCOZc3vOHun2WI4FdGX1eGKi6ySbVnZJ3trv0fT5d/19pG UMuGGRXxt+zx+3D4h+I3jbRfB+veG7O5vdQk8pNR0+VodgVCzO8TbtxwpPyso9vT7Kr1KVaFaPNA/P8A McsxOV1VRxKs2rqzvdf13CvyD8baX/YnjPX9Oxt+x6hcW+302SMv9K/XyvzV+JXw3u/F37VuueFbJSs2p6 0zlgP9WkmJXkPsqszfhXj5tBzjC297fefpvhvi4Yevi1Udo8ik/SL1f4ne/CPVT+zd+ztqnxIktopvEPiG6jttMt7g Y3QIxJz3AYLK3HB2x+tefftpeDrCfxDoXxM8PgP4e8ZWiXJdBwlyEXcDjoWUqSOu5ZPQ17d8cP2mPDnw w8QHwNa+AtK8UaZ4eto7eM3zqViYRjKKpjYDC7VJ9QfSsfw78RtK/bF+Fni74e23hex8K6vpdsup6JZ2cw 8p5FZs7RsUL8zBTx0mJrPlpyi8PGV2tlbqt/vOyVbG08RHO69BxjUbcpc0f4crKC5b3XKlF/eeNfsI6Q+pftGa PcIpK6faXdy59AYmiz+co/Ov09r8+/8AgnHok3/Cz/Fl+8bILPSfskgYYKtJOjYPof3J/Kv0Er0Mvjajfuz4vjOr7 TNOX+WKX5v9Qrxf4xfsw6J8TtRn1/Tr668M+LXQKdTs3bbNhdoEiZHYAZUg4HOcYr2iiu2pThVjyzV0fKYL H4nLqyr4WbjL812a2a8noflR8aPgj40+FNxdv4jspLi2lLFdXhYywTk9y/UMfR8H2re/Z9/ZR+I/jy8ttctrm68 DaOw+XV5GeK4lQgZ8mNSGYEHqSqkZwT0r9NLq1gvoGhuIY7iFsbo5VDKcHIyD7gVLXl08spwm3d2/rqf oGL48xmKw0aXsoqpazl0t5RfX715Hn3wf+B/hv4K6XeW+hpcz3uoMsmoalfTGWe8dSxDOegxvbhQOvO Tk16DRRXrxioLlirI/N61apiKjq1pOUnu2f//Z" alt="Angular" /> div> body> html> 
 

Источник