如何在react js中显示firebase Storage中的所有图像

npm install firebase

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

// 初始化Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化Firebase应用
firebase.initializeApp(firebaseConfig);

// 获取Firebase存储引用
const storage = firebase.storage();

import React, { useEffect, useState } from 'react';

function ImageGallery() {
  const [imageUrls, setImageUrls] = useState([]);

  useEffect(() => {
    // 获取Firebase Storage中的所有文件引用
    const storageRef = storage.ref();
    storageRef.listAll()
      .then((res) => {
        // 构建所有图像的URL数组
        const urls = res.items.map((item) => item.getDownloadURL());
        return Promise.all(urls);
      })
      .then((downloadUrls) => {
        // 设置图像URL数组到状态中
        setImageUrls(downloadUrls);
      })
      .catch((error) => {
        console.error('Error fetching images:', error);
      });
  }, []);

  return (
    <div>
      {imageUrls.map((url) => (
        <img src={url} alt="Firebase Image" key={url} />
      ))}
    </div>
  );
}

export default ImageGallery;

import React from 'react';
import ImageGallery from './ImageGallery';

function App() {
  return (
    <div>
      <h1>My Image Gallery</h1>
      <ImageGallery />
    </div>
  );
}

export default App;