Wie kann ich die Bildquelle mit base64 einstellen?

91

Ich möchte die Image-Quelle auf eine Base64-Quelle setzen, aber es funktioniert nicht:

JSfiddle.net/NT9KB

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

das JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
javascript base64 poppel
quelle
9
Dies funktioniert, wenn Sie Zeilenumbrüche in der base64-Zeichenfolge entfernen. Geige aktualisiert.
Adriano Repetti

Antworten:

134

Versuchen Sie setAttributestattdessen:

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

Echte Antwort: (Und stellen Sie sicher, dass Sie die Zeilenumbrüche in der base64 entfernen.)

Kevin Boucher
quelle
Danke, ich werde in 10 Minuten akzeptieren, warum ist setAttribute besser?
Poppel
@poppel Ich denke nicht, dass es wichtig ist, aber mein erster Versuch, deine Geige zu reparieren, war die Verwendung setAttribute. Nachdem dies fehlgeschlagen war, bemerkte ich die Zeilenumbrüche in der base64-Codierung. (Da ich mich beeilte, eine Antwort zu erhalten, habe ich es nicht versucht, src=nachdem ich die Zeilenumbrüche
Kevin Boucher
26

Falls Sie jQuery bevorzugen, um das Image von Base64 festzulegen:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
Faris Zacina
quelle
5
@TruthSerum verwenden wir nicht, da wir zu einem React-Stack wechseln. Aber haben Sie zum Spaß statistische Beweise, um Ihre Behauptung zu beweisen? Denken Sie wirklich, dass es keine älteren Web-Apps gibt, die jQuery verwenden? Ihr Kommentar basiert auf Ihrer persönlichen Meinung und ist wirklich eine Verschwendung meiner persönlichen Zeit. Auch wenn Sie das Projekt überprüfen, wird es weiterhin gepflegt und hat eine riesige Follower-Basis. github.com/jquery/jquery/commits/master
Faris Zacina
5
Auch @TruthSerum hier sind einige Statistiken, da Sie keine Gelegenheit hatten, sie zu überprüfen, bevor Sie Ihren Kommentar veröffentlichen: google.com/trends/…
Faris Zacina
Heutzutage propsollte anstelle der attrAktualisierung des DOM verwendet werden. attrbezieht sich auf den ursprünglichen Seitenstatus beim Laden.
AntonChanning
6 
img = new Image();
img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
img.outerHTML;
"<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==">"
zzart
quelle
3

Ihr Problem sind die cr (Wagenrücklauf)

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

Sie können verwenden: 

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
Matías Damonte
quelle
Was ist die Lösung genau hier?
AHH
Die Lösung hier besteht darin, die Zeilenumbrüche (Wagenrückläufe) von der Basis 64 zu entfernen.
Kevin Boucher