新標題：使用Vue從Firebase雲端儲存Blob顯示圖像
我正在建立一個產品查找儲存庫，用戶將掃描產品條碼，然後該條碼將返回有關產品的資料以及要顯示的產品圖片。
現在出於測試目的，我已經設定了一個 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？
我已按要求添加了回應：
