如何使用 React 简单地从 firebase 存储中检索图像并显示它们？

Question

我看到很多关于这个话题的问题。但是，所有这些似乎都太复杂了，无法满足我的需求。（上传、从不同文件夹拍摄照片、重新渲染更改等）。

我只想显示一些预先知道的图像，用户不会更改这些图像 - 也许有时我会更改，但仅此而已。

这是我的配置文件：

import firebase from 'firebase/app';
import 'firebase/storage';
import 'firebase/firestore';


// Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyCrThJklCCnH6PJMVUocQ2CeMk2WpRh5Pc",
    authDomain: "shez-up.firebaseapp.com",
    databaseURL: "https://XXX-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "shez-up",
    storageBucket: "shez-up.appspot.com",
    messagingSenderId: "279615555905",
    appId: "1:279615555905:web:a69de3206d7ae83fb3f9c0",
    measurementId: "G-0C770XW4BC"
  };
  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

const projectStorage = firebase.storage("gs://XXX.appspot.com/");

export { projectStorage };

我想创建一个简单的不变（=不变）图库。

我想这很简单，但是我无法理解如何创建想要的画廊页面。

我希望能有一个简单的解释、一个简单的参考和任何代码示例都很棒！

Answer 1

您可以使用 getDownloadURL 方法，然后在 <img> 标签中使用那些 URL。

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})

查看 documentation for a full example. Make sure your security rules 允许读取文件。

"All I want, is to display a few images that are known in advance"

如果图像不经常更改，那么我只需上传它们并从控制台获取 URL 并将它们粘贴到代码中，而不是对 Firebase 存储进行 API 调用。您可以从此处在 Firebase 控制台中获取 URL：

右键单击文件名并单击Copy link address。除非您撤销令牌，否则 URL 不会过期。

如何使用 React 简单地从 firebase 存储中检索图像并显示它们？

How to SIMPLY retrieve images from firebase storage and display them, using react?

firebase

reactjs

firebase-storage