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

【问题标题】：How to get an image from firebase storage using the GUI of firebase?如何使用 Firebase 的 GUI 从 Firebase 存储中获取图像？
【发布时间】：2021-02-14 22:42:40
【问题描述】：

所以我将一张图片上传到了 firebase 存储，并在这样的用户集合中引用它：

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

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

displayname: David, 
avatar: n,

我如何在那里获得图像？

【问题讨论】：

标签： reactjs firebase google-cloud-firestore firebase-storage

【解决方案1】：

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

有关这方面的更多示例，请参阅 getting data via a url 上的 Firebase 文档。

【讨论】：