Display Base64 Image in HTML using JavaScript/jQuery

This post shows you how to display a Base64 Image in HTML using pure JavaScript and jQuery approaches.
 

1. jQuery approach

function displayBase64Image(placeholder, base64Image) {
    placeholder.html('');
    $('<img>', {
        src: base64Image
    }).appendTo(placeholder);
}

Here is an example showing how to display a Base64 image in HTML using jQuery. Click on the “Run Example” button to see how it works.

example1.htmlRun Example
<!DOCTYPE html>
<html>
<head>
    <title>Example 1</title>
</head>
<body>
    <h3>Display Base64 Image in HTML using jQuery</h3><br>

    <div id="image-placeholder"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        
        function displayBase64Image(placeholder, base64Image) {
            placeholder.html('');
            $('<img>', {
                src: base64Image
            }).appendTo(placeholder);
        }


        // base64 image string
        var base64Image = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCABQAFADASIAAhEBAxEB/8QAHAAAAgMBAQEBAAAAAAAAAAAAAAgBBwkGAgQD/8QANxAAAQMDAgQDBQYGAwAAAAAAAQIDBAAFEQYHCBIhMRNBURQyQmGBCSJxgpGhFTNykrTDVHSi/8QAGgEAAgMBAQAAAAAAAAAAAAAABAUDBgcACP/EADQRAAAEAwUECAYDAAAAAAAAAAABAgQDERIFBhMxkSFhcfAUFRZRobHB0QcXMkFCUiIzgf/aAAwDAQACEQMRAD8AqKiiivRA8xAqPy1NFcOBUetMJw2cKEze62ydWX6+u2ewMPmM0WGgt+U4ACvk5uiUjIGSDk5GOhq4r39nLp1xgnTm5dzjvcvQTYTb6T/YW8Ugc3ms5pGOBEXtLPYZy0Fha3VtN5AJxBh/xPLaRT1MI1RVx7qcKO7u1jL1yl2pq92hrKlTrWS6GkerjZAWj5nBA9apsHIzTVq9bvkYkBRKLcFDxi5Yrw3CDSe8Hn9KPSpoooCgooq5+ErayPunu/Bj3OOHbRY0G6T0qGUuchAbbPqFLKcjzSlVCvXSGLdUdeSSmCmLRb9yhvDzUchdfDdwU2C96Zj613jhS31XJCXYVnS84wGmT1DjxQQvnV3CQRgd8k4TwPFlw66Q2tYY1Zt/7RHty5IiS4DzxeDRWCUuNqXleOmCCT3GK0Fvl0btNuU/nB5elZ1cWe9CNZXpzb+zKC4lslh2fIB6OSEAgND5Jycn16eXXN7FtS07TtQlko6fuX4kXDkxqVuWPZVkWOaFIKrIj/I1cfMspBruB4Y4drH/ANud/kuVd0u6RYawhxxKSTjqapLgfyeHaxAf8ud/kuVyPG7OksbV3TwJDjS25cNaFoWQpJElvBBHY0ket+l2uuBOVSzLUxYbPc9CsSG4lOmGRy4EGcW2zcGSRg5pLOK/hZhhiZuLt1bURpjAMi5W1hOG5CO6nWkjs4O5SPe79/fjhF4r7vJvcLa7c65LlicsMWm6vry6HT7rDx+Lm7IUfvZwDnIIcy/wUTIS1Y6gVIfTbrvSL7+Ci50EKVML3MDOXuk+dRjKFJUMpqatHiT27Z253TnRbfHDVsu6P4jEQkYS3zkhxsfgsHA8gU1V1a+ycoewEx0ZKKYxN8zWwcrbxM0nIFPP9nLZWWtO6y1DypLsmbGh83mEttqXj9Xf2pGKef7OW9MO6d1lp4FIejTY0zl8ylxtSc/q1+9I73VdUxJbvMg/uVR1xDq7lS0MXbxBalf0zom93qP79utsiS2D5rQ2SB+oFZUpW66VPPLLjjhKnFqOSonqSa1f340o9q3RF8scYDxbjbZEVsnyWtshJ/UisoS26ypTL7S23WyW3EKGCkjoQR60luJh0Rf2mWnMxYPiJiYkH9ZHrsn6DSvgcmxHOHq1NokIUqJNmtPAH+WvxlKwfopJ+tcNxuXSI9tjcmQ4Ap2XEbbB+M+MlWB9Ek/SlI2w3t3D2idlDR11bRFnEKkQZLfix3VAYCuXIIVjplJB9c18e427Gtt1JjMnVtwaUzHJWzEjN+Ew2s91YyST8yTUh3Xcdb9MqKiqrfnOUhEV7mxWL0Gk8SmndlKc+HiOTYeejOtyYzq2nmlhxtaDhSVg5BB9c1sBtrqRzWu2um9UyQPGu9oizHsDAC1tJUofqTWP7DD0l5uNGZU686sNtoQMlSycAAeua1/23045onbPTulpPL41otEaI8QehcQ0Eq/9A1HfzDogy+qZ6bJ+gk+HeJixpfTItZnL1CbcedqZDOnLwEAOMTJEXPqHGwr/AFfvSj02XHbemXUaes4WC47NflY+TbYT/tpTac3Rq6rRPvPzMIr609brp7inoQj81XPwlbqR9rN34Mi6Sg1aL4g2ucpRwlvxCC24fQJWE5PklSqpmoIzT161hvm6m68lFIV1i7WwcocQ80nMbR3CG3PjFtQByOlIzxR8J9/N5mbi7b2tc1MtReudrYRl3xPN5lPx57lI656jOTjpuE7i3gy7dC2w3QuaY82MlMe1XWQvCJKB0Sy6o9nB0AWeihgH7/vOCHockdVJrIUqe3Ye5bfBRc6DbTJhe5gW33SfP+GMXXWnWHlsSG1tOtkocbWOVSSO4IPY1LDL0l5uNGacdddWEtttgqUonsAB3Na/ak2u211g57TqnQ9huz+MB6ZAadcA/rUM/vU6b20210U57TpfRFgtD2MeLEgtNOY/qSM/vVo7dw8P+k6uOzy9BUfl3FxJYxU8Nuk/UKhwk8JV6g3mFulujbFw/Ylh+02mQjDvi/C+8n4OXulJ65wTjHVudY3tq125aAsc6x2zX6XnVcC2MKCHQpePWkf4neJpFwEvQ+iLiH5TuWZ89lWUx0di22R3cPYke7+ParGb2874jMtvgkudRb0pYXSYGU/dR86CluIPX7e4W5k2ZDkeLbrWPYIqwejnISXHB+KycHzAFVx+aoSkISEpGAK9VrzFollATARkkpDEn7xb9ytxEzUcwUUUUWBB5IyPvVb+2nFNu1tnHatca7IvVpaAS3CuYLvhI9G3AQtA9BkgelVFRQrpm3epojpJRbwUzfOWK8Rus0nuDlWv7QOAtgfxvQVxju46+yTW3kk/nCcV8l84+IjrKk2TQ9xecI6e1S22QP7AqlAopJ2RsuqdB6n7ixdtLXppxC4yL2FmbicRe524yHYUy5otVtd6LiW/LfiD0ccJKz8xkA+lVilKUjlCcD5V6op20ZQGSKICSSW4V54/cvl4jhZqPeCiiiigIP/Z';

        // image placeholder where the image will be displayed
        var imagePlaceholder = $('#image-placeholder');

        // display the image in placeholder
        displayBase64Image(imagePlaceholder, base64Image);

    </script>

</body>
</html>


 

2. Pure JavaScript approach

function displayBase64Image(placeholder, base64Image) {
    var image = document.createElement('img');
    image.onload = function() {
        placeholder.innerHTML = '';
        placeholder.appendChild(this);
    }
    image.src = base64Image;
}

Here is an example showing how to display a Base64 image in HTML using pure JavaScript. Click on the “Run Example” button to see how it works.

example2.htmlRun Example
<!DOCTYPE html>
<html>
<head>
    <title>Example 2</title>
</head>
<body>
    <h3>Display Base64 Image in HTML using Pure JavaScript</h3><br>

    <div id="image-placeholder"></div>


    <script type="text/javascript">
        
        function displayBase64Image(placeholder, base64Image) {
            var image = document.createElement('img');
            image.onload = function() {
                placeholder.innerHTML = '';
                placeholder.appendChild(this);
            }
            image.src = base64Image;
        }


        // base64 image string
        var base64Image = 'data:image/jpeg;base64,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';

        // image placeholder where the image will be displayed
        var imagePlaceholder = document.getElementById('image-placeholder');

        // display the image in placeholder
        displayBase64Image(imagePlaceholder, base64Image);

    </script>

</body>
</html>

Leave a Reply

avatar