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

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.)


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==');

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

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

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.