Comment puis-je définir la source d'image avec base64

93

Je veux définir la source d'image sur une source base64 mais cela ne fonctionne pas:

JSfiddle.net/NT9KB

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

le JavaScript

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
javascript base64 poppel
la source
9
Cela fonctionne si vous supprimez les sauts de ligne dans la chaîne base64. Fiddle mis à jour.
Adriano Repetti

Réponses:

136

Essayez d'utiliser à la setAttributeplace:

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

Vraie réponse: (Et assurez-vous de supprimer les sauts de ligne dans la base64.)

Kevin Boucher
la source
thx, j'accepterai dans 10 minutes, pourquoi setAttribute est-il meilleur?
poppel
@poppel Je ne pense pas que ce soit important, mais ma première tentative pour réparer votre violon a été d'utiliser setAttribute. C'est après cet échec que j'ai remarqué les sauts de ligne dans l'encodage base64. (Comme je me précipitais pour obtenir une réponse, je ne l'ai pas essayée src=après avoir corrigé les sauts de ligne.)
Kevin Boucher
26

Si vous préférez utiliser jQuery pour définir l'image à partir de Base64:

$("#img").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
Faris Zacina
la source
5
@TruthSerum nous ne l'utilisons pas, car nous passons à une pile React. Mais pour le plaisir, avez-vous des preuves statistiques pour prouver votre affirmation? Pensez-vous vraiment qu'il n'y a pas d'applications Web héritées utilisant jQuery? Votre commentaire est basé sur votre opinion personnelle, et vraiment une perte de temps personnel. De plus, si vous vérifiez le projet, il est toujours maintenu et dispose d'une énorme base d'abonnés. github.com/jquery/jquery/commits/master
Faris Zacina
5
Aussi @TruthSerum voici quelques statistiques, puisque vous n'avez pas eu l'occasion de les vérifier avant de publier votre commentaire: google.com/trends/…
Faris Zacina
Ces jours-ci, propdevrait être utilisé au lieu de attrpour mettre à jour le DOM. attrfait référence à l'état de la page d'origine lors du chargement.
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
la source
3

Votre problème est le cr (retour chariot)

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

vous pouvez utiliser: 

document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
Matías Damonte
la source
Quelle est la solution exactement ici?
AHH
La solution ici est de supprimer les sauts de ligne (retours chariot) de la Base 64.
Kevin Boucher