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 urls。这是img标记的example from wikipedia：

<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);
});

有关base64编码的img网址的更多信息，请参阅此MDN reference。

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

Answer 2

您想要发送原始图片数据base64-encoded，并结合data:// URI scheme。

Answer 3

所以听起来是一个网址，而且是/images/25。

据我所知，您无法显示从AJAX调用*获得的图像数据。但为什么不把URL放在<img>标签中呢？浏览器认为图像是由服务器生成的，而不是从文件中读取。

* 编辑：我错了;如果你真的需要使用AJAX调用，请参阅gideon的答案（例如，您需要发出POST请求或发送某些标题）。

Answer 4

如果您通过PHP或ASP或其他方式呈现，我会依赖它。只是简单的事情

$('#elementOfChoice').append('<img src="'+ rawImageData +'" alt="something" />');

虽然我错了。一切都取决于幕后发生的事情，使图像成为现实。如果它必须通过一个PHP文件导致它的base_64图像需要编码，或者无论如何必须相应地进行编码。

Answer 5

实现此目的的另一种方法是将 Blob 与 ObjectURL 结合使用。这样，浏览器会创建一个临时的伪资源，其中 blob url 用作图像的 src。

对于 jQuery，您需要稍微修改 get 请求，告诉您需要 blob 作为响应。否则它不会工作：

$.get({
  url: imgUrl,
  xhrFields: {
    responseType: "blob",
  },
  success: function (blobData) {
    const objectURL = URL.createObjectURL(blobData);
    $('#imgPlaceholder1').attr('src', objectURL);
  },
});

或者你可以用纯 JS 来做：

fetch(imgUrl)
.then(response => response.blob())
.then(blob => {
  const objectURL = URL.createObjectURL(blob);
  document.getElementById('imgPlaceholder2').src = objectURL;
});

在 Chrome 89.0.4389.114、Firefox 65.0.1 和 MS Edge 89.0.774.76 中测试。

看看下面片段中的工作示例。

function getImage() {
  const imgUrl = 'https://upload.wikimedia.org/wikipedia/commons/1/19/Crystal_Project_image.png';
  
  // jQuery
  $.get({
    url: imgUrl,
    xhrFields: {
      responseType: "blob",
    },
    success: function(blobData) {
      const objectURL = URL.createObjectURL(blobData);
      $('#imgPlaceholder1').attr('src', objectURL);
    },
  });

  // Vanilla JS
  fetch(imgUrl)
    .then(response => response.blob())
    .then(blob => {
      const objectURL = URL.createObjectURL(blob);
      document.getElementById('imgPlaceholder2').src = objectURL;
    });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><button onclick="getImage()">Load image</button></div><br>
<div width="100%">
  <div><img id="imgPlaceholder1" alt="Nothing here yet" /></div>  <br>
  <div><img id="imgPlaceholder2" alt="Nothing here yet" /></div>
</div>

Answer 6

$( "<img>" ).attr( "src", icon_url ).appendTo( "#images" );

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

6 个答案: