为什么使用 `URL.createObjectURL(blob)` 而不是 `image.src`？答案

【问题标题】：Why use `URL.createObjectURL(blob)` instead of `image.src`?为什么使用 `URL.createObjectURL(blob)` 而不是 `image.src`？
【发布时间】：2020-08-01 18:09:28
【问题描述】：

第一季度。在异步 JavaScript 和需要从客户端“获取”数据的情况下，为什么我们不能通过属性src 来编辑我们的图像元素？

第二季度。为什么必须经过 Blob 转换过程？

第三季度。什么是 blob 角色？

例如从 JSON 中检索图像文件。（顺便说一句，我是从 MDN 网页中提取的，请注意 cmets）


  function fetchBlob(product) {
    // construct the URL path to the image file from the product.image property
    let url = 'images/' + product.image;
    // Use fetch to fetch the image, and convert the resulting response to a blob
    // Again, if any errors occur we report them in the console.
    fetch(url).then(function(response) {
        return response.blob();
    }).then(function(blob) {
      // Convert the blob to an object URL — this is basically an temporary internal URL
      // that points to an object stored inside the browser
      let objectURL = URL.createObjectURL(blob);
      // invoke showProduct
      showProduct(objectURL, product);
    });
  }

【问题讨论】：

你可以。你是对的，对于这种情况，它完全没用。该代码仅用于说明如何使用 createObjectURL API。
但是 createObjectURL 对于图像之外的一些其他情况也很有用。假设您制作了一个 Web 应用程序，它允许您的用户拖放任意文件，然后将其压缩并提供 zip 文件的下载链接。它可以在客户端使用纯js完成，不涉及服务器。对于这种情况，createObjectURL 将是一个有意义的部分。

标签： javascript json blob asynchronous-javascript

【解决方案1】：

如果可以，请直接使用该网址作为您的<img> 的src。

使用blob: URL 仅在您有一个保存图像文件的 Blob 并且您需要显示它时才有用。

发生这种情况的一个常见情况是您允许用户从他们的磁盘中选择一个文件。文件选择器将允许您访问 File 对象，它是一个 Blob，您可以将其加载到内存中。但是，您无权访问指向磁盘上文件的 URI，因此在这种情况下您无法设置 src。
在这里，您需要创建一个指向 File 对象的 blob: URI。浏览器内部获取机制将能够从该 URL 检索用户磁盘上的数据，从而显示该图像：

document.querySelector('input').onchange = e => {
  const file = e.target.files[0]; // this Object holds a reference to the file on disk
  const url = URL.createObjectURL(file); // this points to the File object we just created
  document.querySelector('img').src = url;
};

<input type="file" accepts="image/*">
<img>

其他情况意味着您确实从前端创建图像文件（例如使用画布）。

但是，如果您的 Blob 只是从您的服务器获取资源的结果，并且您的服务器不需要特殊请求来为其提供服务，那么确实没有任何意义......

【讨论】：

URL.createObjectURL 已被弃用，它会在 Chrome 上引发异常。
@Francesco only URL.createObjectURL (mediaStream) 已被弃用，您永远无法在 img 的 src 中使用...
我有点困惑：developer.mozilla.org/en-US/docs/Web/API/File/…。也许我只是使用了错误的命名空间/包（虽然名称相同）。在示例中，上传的文件在传递给 URL.createObjectURL 后用作 src 值
@Francesco 我想你是肯定的，我不确定你所描述的。再一次，已弃用的是将 MediaStream 传递给 createObjectURL（例如，您将使用 getUserMedia() 获得。传递文件或 Blob 甚至 MediaSource 仍然在任何地方都得到很好的支持，但它曾经是有意义的将生成的 blob: URI 设置为的 src 仅当该 blob: URI 指向图像文件时（即，当它是使用 Blob 或文件创建时）
感谢@Kaiido，我的困惑来自于许多这些博客（甚至是 MDN）都是最近才出现的，因此我本来希望避免推广一种已弃用的方法。也就是说，如果我有一个引用图像的 Blob，我如何使用或转换它以显示在 src 属性中？

【解决方案2】：

创建 Blob URL 的示例：
https://www.w3schools.com/code/tryit.asp?filename=GMLA27XOT9SA

这是一个已创建的 blob URL 示例：

<blob:https://tryit.w3schools.com/c577893f-9510-4a12-a1ce-6a1a101269a2>

【讨论】：