Question

这是我的代码的一部分

xmlhttp.open("GET", theUrl, true);
document.imglive.innerHTML = '<img src="data:image/jpeg,' + xmlhttp.responseText + '"/>';

似乎不起作用。我也试过了

document.imglive.src= xmlhttp.responseText;

既没有效果

我在这里检查了一些问题，但没有一个答案可以帮助解决这个问题。

Answer 1

使用base64来做这些事情。在现代浏览器中，这个btoa本机函数可以帮助您：

document.imglive.innerHTML = "<img src='data:image/jpeg;base64," + btoa(xmlhttp.responseText) + "'/>";

对于其他浏览器，有简单的模拟实现，只需检查它们。

P.S。：不要污染document对象，使用单独的变量或命名空间。

Answer 2

如果您对IE10 +感到满意，可以将xhr.responseType = 'blob'与window.URL.createObjectURL()结合使用（获得免费支持以获取正确的mime类型）。

xhr.responseType = 'blob';
xhr.onload = function(response) {
  var url = window.URL.createObjectURL(response);
  document.imglive.src = url; // from your example code
}
xhr.open("GET", theUrl, true);

将来自xmlhttprequest的jpg数据放入<img/>标记

2 个答案: