新标题：使用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？
我已按要求添加了回复：
