¿Cómo mostrar una imagen que recibimos a través de la llamada Ajax?

Question

El servidor web genera imágenes y las envía al cliente directamente. No hay URL para las imágenes, por razones de seguridad. Por ejemplo, si ingreso /images/25 URL en el servidor del navegador, lo enviaré y el navegador lo descargará.

Ahora quiero obtener esta imagen de la llamada Ajax y luego mostrarla en la página existente. Puedo obtener los datos de la imagen. Mi pregunta es: ¿cómo puedo mostrar una imagen?

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

actualización

Me disculpo por ser tan estúpida. Gracias, JW. Por supuesto, puedo poner etiquetas img con src en mi URL. No importa si se trata de una URL directa a un archivo de imagen o si el servidor lo envía dinámicamente.

Answer 1

Parece que es una URL, y es /images/25.

Hasta donde yo sé, no puede mostrar los datos de imagen que obtiene de una llamada AJAX *. Pero ¿por qué no simplemente poner la URL en una etiqueta <img>? No le importa al navegador que la imagen sea generada por el servidor, en lugar de leer desde un archivo.

* EDIT: Estaba equivocado; vea la respuesta de gideon si realmente necesita usar una llamada AJAX (por ejemplo, necesita hacer una solicitud POST, o enviar ciertos encabezados).

Answer 2

Desea enviar los datos de imagen sin procesar base64-encoded, combinados con data:// URI scheme.

Answer 3

Me imagino que es lo mismo que si se procesara a través de PHP o ASP o lo que sea. simplemente algo simple como

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

aunque podría estar equivocado. Todo depende de lo que esté ocurriendo detrás de escena para que esa imagen se convierta en lo que es. Si tiene que pasar a través de un archivo PHP porque es una imagen base_64 y necesita ser codificada, o en cualquier caso, eso tiene que hacerse en consecuencia.

Answer 4

Para ampliar la respuesta de Matt, puede usar urls de img codificadas en base64. Se trata de una example from wikipedia de lo que etiqueta img se vería así:

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

Necesita una imagen en blanco:

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

Su servidor tiene que devolver la imagen como una cadena de base 64, entonces se podría hacer:

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

ver este MDN reference más en base64 URLs img.

me hizo una breve demostración aquí: http://jsfiddle.net/99jAX/1/

Answer 5

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