时间戳

首页 > 解决方案 > 如何使用 Firebase 的 GUI 从 Firebase 存储中获取图像？

reactjs - 如何使用 Firebase 的 GUI 从 Firebase 存储中获取图像？

问题描述

因此，我将图像上传到 firebase 存储，并在这样的用户集合中引用它：

displayname: "David"
avatar: gs:/news-14b77.appspot.com/avatar Images/david.jpg

现在我想在我的项目（React）中获取该对象并查看该图像，我在控制台记录时得到的对象是：

displayname: David, 
avatar: n,

我如何在那里获得图像？

标签： reactjsfirebasegoogle-cloud-firestorefirebase-storage

解决方案

这gs:/news-14b77.appspot.com/avatar Images/david.jpg是一种 URL 类型，仅适用于 Firebase Storage 和 Cloud Storage SDK。您不能直接将其添加到img视图中，因为它不知道如何处理gs:/协议。

因此，您需要使用 Firebase SDK 将gs:/URL 转换为所谓的下载 URL，该 URL 提供对文件的公共只读访问权限。那是这样的：

var ref = firebase.storage().refFromURL('gs:/news-14b77.appspot.com/avatar Images/david.jpg');
ref.getDownloadURL().then((url) => {
  // in here you can set the URL for the avatar
});

或（使用await）：

let ref = firebase.storage().refFromURL('gs:/news-14b77.appspot.com/avatar Images/david.jpg');
let url = await ref.getDownloadURL();
// here you can set the URL for the avatar

有关这方面的更多示例，请参阅有关通过 url 获取数据的 Firebase 文档。

推荐阅读