通过Ajax的图像数据 - 如何在页面上显示图像

Question

我正在通过包含照片的AJAX创建Domino文档。 我能够在Notes Domino文档中将base64图像数据恢复到服务器。

数据存储在Richtext（textarea）字段中

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

我正在尝试使用passthru标签

在Domino网页上显示

<<image id= "pic1" >>

在Form的onLoad事件中，我尝试使用以下代码将数据推送到image元素中：

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

警报显示数据。 图片没有出现。

请帮助。
由于
麦克

Answer 1

我的印象是使用数据URI可以使用内嵌图像。

喜欢：

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

或

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

编辑：测试......这是一个jsFiddle：

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

Mozilla的相关信息：https://developer.mozilla.org/en/The_data_URL_scheme

注意：Josiah在他的评论中也是正确的，你的目标标签需要是img，而不是图像。

Answer 2

您只需创建一个Image对象并将base64作为其src，包括data:image...部分like this：

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

这就是他们所谓的“数据URI”，这里是内部和平的the compatibility table。