Реагировать: Получить и отобразить все изображения из папки хранилища Firebase - PullRequest
Новая
       9

Реагировать: Получить и отобразить все изображения из папки хранилища Firebase

0 голосов
/ 07 апреля 2020

Я пытаюсь отобразить все изображения из Firebase Storage Folder (с именем "/test").

Я бы хотел, чтобы все изображения были в папке без необходимости знать их имена или сколько Есть.

Я новичок в React.

Спасибо Фрэнку ван Пуффелену за помощь и использование listAll ().

У меня все еще есть проблема с частью Render. Я не могу отобразить изображения, даже если они отображаются в состоянии

Chrome Отладка экрана печати консоли

Большое спасибо за помощь! 

import React from "react";
import firebaseApp from "../Firebase";

class DisplayImages extends React.Component {
  constructor() {
    super();
    this.state = {
      images: []
    };

    this.getImage("images");
  }

  getImage() {
    let { state } = this;

    // Create a reference under which you want to list
    var listRef = firebaseApp
      .storage()
      .ref()
      .child("/test");

    // Find all the prefixes and items.
    listRef
      .listAll()
      .then(function(res) {
        // Store the list in the state, just in case we need it somewhere
        state.images = res.items;
        state.downloadURLs = {}; // in here we'll store the download URL for each image by its name
        this.setState(state);

        res.items.forEach(function(itemRef) {
          itemRef
            .getDownloadURL()
            .then(url => {
              state.downloadURLs[itemRef.name] = url;
              this.setState(state);
            })
            .catch(error => {
              // Handle any errors
            });
        });
      })
      .catch(function(error) {
        // Uh-oh, an error occurred!
      });
  }

  render() {
    let numbersOfImagesInFolder = this.state.images.length;

    let imagesInFolder = this.state.images.map(image => {
      return (
        <>
          <img
            key={image}
            src={require(`${image}.jpg`)}
            alt=""
            className="img-responsive"
          />
        </>
      );
    });

    return (
      <>
        <br />
        {numbersOfImagesInFolder}
        {imagesInFolder}
      </>
    );
  }
}

export default DisplayImages;
...