新標題：使用Vue從Firebase雲端儲存Blob顯示圖像

Question

我正在建立一個產品查找儲存庫，用戶將掃描產品條碼，然後該條碼將返回有關產品的資料以及要顯示的產品圖片。

現在出於測試目的，我已經設定了一個 Firebase 儲存桶，並上傳了一張圖片。我已經成功地透過呼叫 firebase storage 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>，如下：