Comment afficher une image que nous avons reçu par appel Ajax?

Serveur Web génère des images et les envoie au client directement. Il n'y a pas d'Url pour les images, pour des raisons de sécurité. Par exemple, si je entrer /images/25 URL dans le navigateur de serveur va envoyer et navigateur va télécharger.

Maintenant je veux obtenir cette image à partir de l'appel Ajax, puis l'afficher sur la page existante. Je peux obtenir les données de l'image. Ma question est: comment puis-je afficher une image?

$.get("/images/25", function (rawImageData) {
   //??? Need to add an image to DOM
});

Mise à jour

Je m'excuse d'être aussi stupide. Merci, JW. Bien sûr, je peux juste mettre la balise img src mon URL. Il n'a pas d'importance si c'est une URL directe vers un fichier image ou le serveur envoie de façon dynamique.

Est les données de l'image renvoyée comme base64?
Non, en tant que binaire, je suis juste stupide 🙂

OriginalL'auteur Evgenii | 2012-03-01

  1. 4

    Il semble donc qu'il y est une URL, et c'est /images/25.

    Autant que je sache, vous ne pouvez pas afficher les données de l'image que vous obtenez à partir d'un appel AJAX*. Mais pourquoi ne pas mettre l'URL dans un <img> tag? Il n'est pas question pour le navigateur que l'image est générée par le serveur, plutôt que de lire à partir d'un fichier.

    *EDIT: j'ai eu tort; voir gédéon de répondre si vous avez vraiment besoin d'utiliser un appel AJAX (par exemple, vous avez besoin de faire une requête POST, ou envoyer certains en-têtes).

    OriginalL'auteur JW.

  2. 18

    Étendre sur Matt réponse que vous pourriez utiliser, encodé en base64 img url. C'est un exemple de wikipedia de ce que la balise img: 

    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
 AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

    Vous avez besoin d'une image vide:

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

    Votre serveur doit renvoyer l'image en base64, chaîne de caractères, alors vous pourriez le faire: 

    $.get("/images/25", function (rawImageData) {
      $("#target").attr("src","data:image/gif;base64," + rawImageData);
});

    Voir ce MDN référence de plus en base64 img url.

    J'ai fait une courte démo ici:
    http://jsfiddle.net/99jAX/1/

    OriginalL'auteur gideon

  3. 5

    Vous souhaitez envoyer les données d'image brutes base64, combiné avec le données>:// schéma d'URI.

    OriginalL'auteur Matt Ball

  4. 1

    J'avais de la banque qu'il soit le même que si vous avez rendue si via PHP ou ASP ou quoi que ce soit. juste quelque chose de simple comme 

    $('#elementOfChoice').append('<img src="'+ rawImageData +'" alt="something" />');

    mais je peux me tromper. Tout dépend de ce qui se passe derrière les coulisses pour faire de cette image devenue ce qu'elle est. Si sa dois passer par un fichier PHP à cause de son un base_64 image et doit être codé, ou quel que soit le cas, alors ce qui doit être fait en conséquence.

    OriginalL'auteur chris

  5. -1
    $( "<img>" ).attr( "src", icon_url ).appendTo( "#images" );

    OriginalL'auteur Washeen