How can I set Image source with base64

javascript base64
poppel picture poppel · May 8, 2013 · Viewed 153.5k times · Source

I want to set the Image source to a base64 source but it does not work:

JSfiddle.net/NT9KB

<img id="img" src="" />

the JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="

Answer

Kevin Boucher picture Kevin Boucher · May 8, 2013

Try using setAttribute instead:

document.getElementById('img')
    .setAttribute(
        'src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    );

Real answer: (And make sure you remove the line-breaks in the base64.)

Related questions

How can you encode a string to Base64 in JavaScript?

I have a PHP script that can encode a PNG image to a Base64 string. I'd like to do the same thing using JavaScript. I know how to open files, but I'm not sure how to do the encoding. I'm …

Read More
How can I convert an image into Base64 string using JavaScript?

I need to convert my image to a Base64 string so that I can send my image to a server. Is there any JavaScript file for this? Else, how can I convert it?

Read More
Base64 encoding and decoding in client-side Javascript

Are there any methods in JavaScript that could be used to encode and decode a string using base64 encoding?

Read More