如果调用 revokeObjectURL，Blob 图像将不会显示在 Chrome 中答案

【问题标题】：Blob images will not display in Chrome if revokeObjectURL is invoked如果调用 revokeObjectURL，Blob 图像将不会显示在 Chrome 中
【发布时间】：2015-06-26 18:38:52
【问题描述】：

-----更新-----

我注释掉了window.URL.revokeObjectURL( imgSrc );，现在该调用适用于所有浏览器。 Chrome 中的 url 似乎被撤销得太早了。我仍然很想知道为什么会这样，并且想知道我现在处理撤销 URL 的方式是否存在任何问题。我现在撤销最后一个 URL，因为下一个 URL 加载了 if (imgSrc) {window.URL.revokeObjectURL( imgSrc );}（imgSrc 现在是一个全局变量）。

我有一个使用 AJAX 调用 CGI 脚本的网站，该脚本输出图像/jpeg 数据，然后使用 createObjectURL 函数将 blob 响应设置为页面上图像的 src。目前它适用于除 Chrome 之外的所有浏览器。

在所有其他浏览器中显示图像，但在 Chrome 中我收到消息：Failed to load resource: the server responded with a status of 404 (Not Found) 后跟以 blob: 为前缀的 url。

我尝试使用 webkitURL 代替，但这给了我同样的错误，然后是 webkitURL is deprecated。

这是我的 AJAX 调用的代码：

var filepath = "/babelia.cgi";
xmlhttp=new XMLHttpRequest();

xmlhttp.onload = function(oEvent) {
if (imgSrc) {window.URL.revokeObjectURL( imgSrc );}
        var blob = xmlhttp.response;
        if (endless) {
        imgSrc = (window.URL ? URL : webkitURL).createObjectURL( blob );
        document.getElementById("palette").src = imgSrc;
        // window.URL.revokeObjectURL( imgSrc );
        babel();
        }
    }
xmlhttp.open("POST",filepath,true);
xmlhttp.responseType = "blob";
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var info = "location=" + postdata;
if (!landscape) {info += "&flip=portrait";}
xmlhttp.send(info);

您可以在这里查看网站：https://babelia.libraryofbabel.info/slideshow.html

【问题讨论】：

我注意到在 Chrome 中创建的 URL 中的第一个冒号被 %3A 替换，而在其他浏览器中不会发生这种情况。我尝试添加imgSrc = imgSrc.replace(/https%3A\/\//,"https://");，将冒号放回网址中，但图像仍然不会出现，并且我收到了相同的错误消息。

标签： javascript ajax image cgi blob

【解决方案1】：

我在理解 blob 时也遇到了一些问题，这是我的 2 美分。

我建议在处理 blob 时使用 https://github.com/eligrey/Blob.js 来抽象出浏览器差异。
调试 chrome 时，请查看 chrome://blob-internals/ 了解详细信息。在当前版本 (47.0.2526.106) 中，它显示 url 和相关数据或对这些 url 的本地文件的引用。
一旦您撤销 url，您基本上就是告诉浏览器您不再需要数据，如果您想释放内存，这很好，但如果您仍然有指向该 url 的引用（例如 img 标记）则不好.

旁注：阅读您的问题让我解决了自己的问题，即撤销后我在 chrome 中看到 404，因为我仍然在 img 标签上引用了已撤销的 url。

【讨论】：