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

Question

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

现在出于测试目的，我设置了一个 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？

我已按要求添加了回复：

Answer 1

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

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

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

Answer 2

问题不在于 blob，而在于显示图像的 vue 标签。 我们使用<img>代替<image> ，如下所示：

<img v-if="image !== null" :src="image" class="img-circle" alt="Services">