Search code examples
javascriptimagelotus-domino

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

Solution

  • 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.