How can I show an image using Javascript starting with a jpg-encoded string?

Question

An annoying API that I have to deal with provides an image as a jpg, but it is a JSON-encoded string within a larger JSON object, rather than just making the jpg available at some url. I have code to access this api with javascript, but then how do I get the image to show up on the page?

update: The API providing the image is accessed from javascript rather than a server, so ideal would be a pure javascript solution. I don't have to support IE6 but I do have to support IE7, Firefox, and Chrome. The jpg isn't base64 encoded but I could base64 encode it in javascript.

Answer 1

If the JSON string is base 64 encoded then you can output it as a Data URI, e.g.

<img src="data:image/jpeg;base64,...." />

This also works (without the base64 tag) if the string is URL encoded (e.g. mostly ASCII, and %xx format for non-printing and non-HTML-safe characters).