Como traer una imagen a un div con ajax

[theroutermatic]

Buen día.

Disculpen la molestia, soy nuevo con javascript y ajax, recientemente he estado trabajando con ajax colocando en un div un archivo html ahora me gustaría traer una imagen pero no lo he logrado por lo que pido su ayuda.
Gracias.

Para cargar el html lo hago de la siguiente manera.. la funcion recibe el html y el div donde lo va a colocar.

Código HTML:

if(window.XMLHttpRequest){
	peticion_http = new XMLHttpRequest();	
}
else if(window.ActiveXObject){
	peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
}

/*fUNCION PARA CARGAR EL ARCHIVO HTML*/
function Mostrar(pagina, id){
	var oid = document.getElementById(id);
	peticion_http.open("GET", pagina);
	peticion_http.onreadystatechange = function(){
		if(peticion_http.readyState == 4 && peticion_http.status == 200){
			oid.innerHTML = peticion_http.responseText;	
		}
	}
	peticion_http.send(null);
}

[maycolalvarez]

recuerda que el tag IMG realiza una petición para obtener la imágen, así que solo basta:

Código Javascript:

var imagen = document.getElementById('id_img'); // <img > del DOM
imagen.src = 'ruta_de_la_imagen.ext'; //con ésto cargas la imagen del server
 

éso si ya tienes la ruta de la imágen, ajax no es realmente necesario a no ser que necesites obtenerlo del servidor, en tal caso o retornas el código HTML completo del <img /> con la ruta de la imagen desde el server, o aplicas el responseText como el src del IMG devolviendo la ruta del server.

lo ideal para ahorrarnos la doble petición (ajax+src de imagen) es crear un controlador de imágen, donde pases por parámetro al src del IMG y desde el server (php por ejemplo) dumpees el binario de la imágen, quedaría mas o menos así:

Código Javascript:

var imagen = document.getElementById('id_img');
imagen.src = 'imagen.php?img=nombre_o_codigo_imagen'; //con ésto cargas la imagen del server
 

la parte del server la tienes que programar según el lenguaje que uses, usualmente en PHP no son más de 3 lineas de código, saludos