Image Data via Ajax - how can I display the image on the Page

I am creating a Domino Document via AJAX that contains a photo. I am able to get the base64 image data back to the server in a Notes Domino Document.

Data is stored in a Richtext (textarea) field as

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAFA..........." - (this goes on for several lines)

I am trying to display on the Domino Webpage using passthru tag

<<image id= "pic1" >>

in the onLoad event of the Form i try to shove the data into the image element using this code:

//Photo Stuff
alert(document.forms[0].photo1.value);
document.getElementById("pic1").src = document.forms[0].photo1.value;

The alert is showing 开发者_运维技巧the data. Picture is not appearing.

Please help.

Thanks

Mike

I was under the impression that inline images were possible using a data URI.

Like:

<img src="data:image/png;base64,
Your base 64 source. . . "/>

Or

document.getElementById("pic1").src = 
   'data:image/png;base64,' + document.forms[0].photo1.value;

Edit: tested... here's a jsFiddle:

http://www.jsfiddle.net/UySAb/1/

Mozilla's information on this: https://developer.mozilla.org/en/The_data_URL_scheme

Note: Josiah in his comments is correct as well, your target tag needs to be img, not image.

You can just create an Image object and put the base64 as its src, including the data:image... part like this:

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

It's what they call "Data URIs" and here's the compatibility table for inner peace.