How to display an image that we received through Ajax call?

To expand on Matt's answer you could use base64 encoded img urls. This is an example from wikipedia of what that img tag would look like:

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

You need a blank image:

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

Your server needs to return the image as a base64 string, then you could do:

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

See this MDN reference for more in base64 encoded img urls.

I made a short demo here: http://jsfiddle.net/99jAX/1/


So it sounds like there is a URL, and it's /images/25.

As far as I know, you can't display image data that you get from an AJAX call*. But why not just put the URL in an <img> tag? It doesn't matter to the browser that the image is generated by the server, rather than read from a file.

*EDIT: I was wrong; see gideon's answer if you really need to use an AJAX call (e.g. you need to make a POST request, or send certain headers).