我正在构建一个产品查找存储库,用户将扫描产品条形码,然后该条形码将返回有关产品的数据以及要显示的产品图片。
现在出于测试目的,我已经设置了一个 Firebase 存储桶,并上传了一张图像。我已经成功地通过调用 firebase storage api 检索图像,但我似乎无法在我的 Vue 应用程序中显示它。我似乎无法在 firebase 文档上找到正确的文档,因为他们的示例使用纯 js 和 html。
我的显示图像的代码:
页面加载时运行的脚本,它会从存储桶中获取图像并显示。
我知道 api 调用有效,因为当我检查 chrome 中的开发人员控制台时,我可以在网络选项卡中的 api 调用中看到预览中的图像。我似乎无法在 vue 中显示它。
它将图像存储为 blob?
我已按要求添加了回复:
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
问题可能出在 Vue 显示 Blob 上。尝试:
xhr.onload = event => { this.image = URL.createObjectURL(xhr.response); event.preventDefault(); };此处
URL.createObjectURL应创建对 Blob 的引用。问题不在于blob,而在于显示图像的vue标签。我们使用
<img>代替<image>,如下所示: