Come posso impostare l'origine dell'immagine con base64

93

Voglio impostare l'origine dell'immagine su una fonte base64 ma non funziona:

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

il JavaScript

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

javascript base64

— poppel
fonte

9

Funziona se rimuovi le interruzioni di riga nella stringa base64. Fiddle aggiornato.

— Adriano Repetti

136

Prova a usare setAttributeinvece:

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

Risposta reale: (e assicurati di rimuovere le interruzioni di riga in base64.)

— Kevin Boucher
fonte

grazie, accetterò tra 10 minuti, perché setAttribute è migliore?

— poppel

@poppel Non penso sia importante, ma il mio primo tentativo di aggiustare il tuo violino è stato usare setAttribute. È stato dopo il fallimento che ho notato le interruzioni di riga nella codifica base64. (Dato che mi stavo affrettando a ricevere una risposta, non l'ho provato src=dopo aver corretto le interruzioni di riga.)

— Kevin Boucher

26

Nel caso in cui si preferisca utilizzare jQuery per impostare l'immagine da Base64:

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

— Faris Zacina
fonte

5

@TruthSerum non lo stiamo usando, dato che passiamo a uno stack React. Ma per divertimento, hai prove statistiche per dimostrare la tua affermazione? Pensi davvero che non ci siano app Web legacy che utilizzano jQuery? Il tuo commento si basa sulla tua opinione personale e davvero una perdita di tempo personale. Inoltre, se controlli il progetto, è ancora mantenuto e ha un'enorme base di follower. github.com/jquery/jquery/commits/master

— Faris Zacina

5

Anche @TruthSerum ecco alcune statistiche, dal momento che non hai avuto la possibilità di controllarle prima di pubblicare il tuo commento: google.com/trends/…

— Faris Zacina

In questi giorni, propdovrebbe essere usato invece che attrper aggiornare il DOM. attrsi riferisce allo stato della pagina originale durante il caricamento.

— AntonChanning il

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
fonte

3

Il tuo problema sono i cr (ritorno a capo)

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

Puoi usare:

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

— Matías Damonte
fonte

Qual è esattamente la soluzione qui?

— AHH

La soluzione qui è rimuovere le interruzioni di riga (ritorni a capo) dalla Base 64.

— Kevin Boucher