I send data from a browser to a servlet using JavaScript, then the server processes the data and returns an image as a response (all using xmlhttprequest). I'm sure everything is working fine because when I call the server directly, I get my image back in the browser.

What I was wondering is how, in JavaScript, do I parse my response so that I can display it as an image in an img tag?

I figure this should be fairly easy, but not sure how to do it.

I send data from a browser to a servlet using JavaScript, then the server processes the data and returns an image as a response (all using xmlhttprequest). I'm sure everything is working fine because when I call the server directly, I get my image back in the browser.

What I was wondering is how, in JavaScript, do I parse my response so that I can display it as an image in an img tag?

I figure this should be fairly easy, but not sure how to do it.

• javascript
• image
• xmlhttprequest
• put

2 Answers 2

You could use data URIs and set the base64 encoded binary data as the src for an image tag.

If you have control over the server, it might be cleaner to have the server give you a URL you can refer to and create a new img tag with that src.

Not sure if this would work with your application, but you could use a server-side script to dynamically serve an image, and then just use javascript to change the source of your image.

i.e.

src="image.php?param1=XXXX&param2=XXXX"

Or just have your XMLHttpRequest return a new path to an existing image on the server and then just change the src attribute of your img.