4

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

Q2。为什么必须经过 Blob 转换过程？

Q3。什么是 blob 角色？

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


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

2 回答 2

7

如果可以，则直接使用 urlsrc作为<img>.

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

发生这种情况的一种常见情况是您允许用户从他们的磁盘中选择一个文件。文件选择器将允许您访问 File 对象，它是一个 Blob，您可以将其加载到内存中。但是，您无权访问指向磁盘上文件的 URI，因此src在这种情况下您无法设置 。
在这里，您需要创建一个blob:指向 File 对象的 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 只是从您的服务器获取资源的结果，并且您的服务器不需要特殊请求来提供它，那么确实，没​​有真正的意义......

于 2020-04-19T10:26:14.107 回答
0

创建 Blob URL 的示例：
https


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

<blob:https://tryit.w3schools.com/c577893f-9510-4a12-a1ce-6a1a101269a2>
于 2021-01-12T14:29:00.370 回答