reactjs - 如何使用 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 };

我想创建一个简单的 NON CHANGING (=constant) 画廊。
我想这很简单，但是我无法理解如何创建想要的画廊页面。
我会很感激一个简单的解释，一个简单的引用和任何代码示例都会很棒!

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一个完整的例子。确保您的 security rules允许读取文件。

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

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

右键单击文件名，然后单击 Copy link address .除非您撤销 token ，否则该 URL 不会过期。