How can I set Image source with base64

JavascriptBase64

Javascript Problem Overview

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=="

Javascript Solutions

Solution 1 - Javascript

Remove the line-breaks in the base64:

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

Solution 2 - Javascript

In case you prefer to use jQuery to set the image from Base64:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');

Solution 3 - Javascript

img = new Image();
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
img.outerHTML;
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">"

Solution 4 - Javascript

Your problem are the cr (carriage return)

http://jsfiddle.net/NT9KB/210/

you can use:

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
Categories
Recommended Javascript Solutions
Recommended Base64 Solutions

Previous Solution:

Best practice for creating millions of small temporary objects

JavaGarbage Collection

Next Solution:

Angularjs if-then-else construction in expression

JavascriptAngularjsIf StatementAngularjs Ng-RepeatTernary Operator

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionpoppelView Question on Stackoverflow
Solution 1 - JavascriptKevin BoucherView Answer on Stackoverflow
Solution 2 - JavascriptFaris ZacinaView Answer on Stackoverflow
Solution 3 - JavascriptzzartView Answer on Stackoverflow
Solution 4 - JavascriptMatías DamonteView Answer on Stackoverflow