javascript - 如何显示我们通过 Ajax 调用收到的图像？

Question

Web 服务器生成图片并直接发送给客户端。出于安全原因，没有图像的 URL。例如，如果我在浏览器中输入 /images/25 URL，服务器将发送它，浏览器将下载它。

现在我想从 Ajax 调用中获取此图像，然后将其显示在现有页面上。我可以获得图像数据。我的问题是:如何显示图像？

$.get("/images/25", function (rawImageData) {
   // ??? Need to add an image to DOM
});

更新

我为我的愚蠢道歉。谢谢你，JW。当然，我可以将带有 src 的 img 标签放到我的 URL 中。这是图像文件的直接 URL 还是服务器动态发送都无关紧要。

Answer 1

要扩展 Matt 的回答，您可以使用 base64 编码的 img 网址。这是 example from wikipedia该 img 标签的外观:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
 AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
 9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

你需要一张空白图片:

<img id="target" src="" />

您的服务器需要将图像作为 base64 字符串返回，那么您可以这样做:

$.get("/images/25", function (rawImageData) {
      $("#target").attr("src","data:image/gif;base64," + rawImageData);
});

查看此 MDN reference有关更多 base64 编码的 img 网址。

我在这里做了一个简短的演示: http://jsfiddle.net/99jAX/1/