Vue 显示来自 firebase 云存储 blob 的图像

Posted 2023-02-16

【中文标题】Vue 显示来自 firebase 云存储 blob 的图像

【英文标题】：Vue display an image from firebase cloud storage blob

【发布时间】：2022-01-19 05:43:27

【问题描述】：

我正在构建产品查找存储库，用户将扫描产品条形码，然后返回产品数据和要显示的产品图片。

现在出于测试目的，我设置了一个 Firebase 存储桶，并上传了一张图片。我已经成功地通过调用 firebase 存储 api 来检索图像，但我似乎无法在我的 Vue 应用程序中显示它。我似乎无法在 firebase 文档上找到合适的文档，因为他们的示例使用纯 js 和 html。

显示图片的代码：

<template>
  <div class="container">
    <div class="row">
      <div class="col">
        <image v-if="image!==null" :src="image"></image>
      </div>
    </div>
  </div>
</template>

页面挂载时运行的脚本，它将从存储桶中获取图像并显示。

<script>
import firebase from "firebase";
export default 
  name: "ProductPage",
  data: () => 
    return 
      image: null
    ;
  ,
  mounted() 
    firebase
      .storage()
      .ref("test/1234-1.jpg")
      .getDownloadURL()
      .then(url => 
        const xhr = new XMLHttpRequest();
        xhr.responseType = "blob";
        xhr.onload = event => 
          this.image = xhr.response;
          event.preventDefault();
        ;
        xhr.open("GET", url);
        xhr.send();
      )
      .catch(error => 
        // Handle any errors
        console.log(error);
      );
  
;
</script>

我知道 api 调用有效，因为当我在 chrome 中检查开发人员控制台时，我可以在网络选项卡中的 api 调用上看到预览图像。我似乎无法在 vue 中显示它。

它将图像存储为 blob？

我已按要求添加了回复：

【问题讨论】：

你能从你的开发控制台添加响应吗？

它是一个blob，响应选项卡没有任何内容，但预览选项卡显示图像。

【参考方案1】：

问题可能在于 Vue 显示 Blob。试试：

xhr.onload = event => 
  this.image = URL.createObjectURL(xhr.response);
  event.preventDefault();
;

这里的URL.createObjectURL 应该创建对 Blob 的引用。