XMLHTTPRequest在响应中返回null [duplicate]

Posted 2021-04-16

可能重复： Getting BLOB data from XHR request

我尝试动态地从我的服务器获取图像，但XMLHTTPRequest在响应中返回null。谷歌Chrome网络工具告诉我他加载了day1.jpg，但blob变量为空...

var xhr = new XMLHttpRequest(), blob;

xhr.open("GET", "day1.jpg", true);

// Set the responseType to blob
xhr.responseType = "blob";

xhr.addEventListener("load", function () {
    if (xhr.status === 200) {
        console.log("Image retrieved");
        blob = xhr.response;
        console.log("blob: " + blob);
    }
}, false);

// Send XHR
xhr.send();

输出是：

Image retrieved
blob: null

答案

原因是Chrome端存在错误（也可在v18上找到）。 Reported here

另一答案

为什么使用ajax加载图像（据我所知你不能http://www.mail-archive.com/[e-mail]/msg00377.html）？您可以动态生成图像元素并将src属性设置为服务器上的图像。

var i = new Image();
i.onload = function()
{
   //do the stuff you need to do once it loads here
}
i.src = "day1.jpg"; 

另一答案

使用控制台检查xhr对象并查看它是否正在填充

另一答案

我怀疑你可以动态地从服务器加载图像，而你可以做的是动态更新图像源并从whci位置告诉图像被提取/加载