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">