Приложение React: изображения из Firebase не отображаются на странице

Question

Я хочу отображать изображения на странице, которые приходят из firebase. Я могу успешно получить URL-адреса из хранилища, но когда я использую их в качестве источника изображения, они (изображения) не отображаются. Как видно из рисунка выше, теги изображения пустые. Я не знаю в чем проблема. Мог бы предложить мне выход. Мой код следующий:

import React, { Component } from 'react';
import { firebase } from '../../../firebase';
import AdminLayout from '../../../Hoc/AdminLayout';
import { firebasePhotos } from '../../../firebase';
import { firebaseLooper, reverseArray } from '../../ui/misc';
import { css } from 'react-emotion';
import { BarLoader } from 'react-spinners';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';

class Adminphoto extends Component {
  state = {
    isLoading: true,
    photos: [],
    marginTop: '40px',
    successForm: ''
  };

  componentDidMount() {
    firebasePhotos.once('value').then(snapshot => {
      const photos = firebaseLooper(snapshot);
      this.setState({
        isLoading: false,
        marginTop: '0px',
        photos: reverseArray(photos)
      });
    });
  }

  getURL = filename => {
    //console.log(filename);
    firebase
      .storage()
      .ref('photos')
      .child(filename)
      .getDownloadURL()
      .then(url => {
        console.log('url =>' + url);
        return url;
      });
  };

  successForm(message) {
    this.setState({
      successForm: message
    });

    setTimeout(() => {
      this.setState({
        formSuccess: ''
      });
    }, 2000);
  }

  deleteItem(event, photo) {
    event.preventDefault();
    confirmAlert({
      title: 'Confirm to submit',
      message: 'Are you sure to do this.',
      buttons: [
        {
          label: 'Yes',
          onClick: () => {
            firebasePhotos
              .child(photo.id)
              .remove()
              .then(() => {
                this.successForm('Removed successfully');
                this.props.history.push('/admin_photo');
              });
          }
        },
        {
          label: 'No',
          onClick: () => {
            return false;
          }
        }
      ]
    });
  }

  render() {
    console.log(this.state.photos);
    const override = css`
      display: block;
      margin: 0 auto;
      border-color: red;
    `;
    return (
      <AdminLayout>
        <React.Fragment>
          <div
            className="has-text-centered"
            style={{ marginTop: this.state.marginTop }}
          >
            {this.state.isLoading ? (
              <BarLoader
                className={override}
                sizeUnit={'px'}
                size={50}
                width={100}
                height={4}
                color={'#2D7969'}
                loading={this.state.loading}
              />
            ) : (
              ''
            )}
          </div>
          <div className="columns">
            {this.state.photos
              ? this.state.photos.map((photo, i) => (
                  <div key={i} className="column">
                    <img src={this.getURL(photo.image)} />
                  </div>
                ))
              : null}
          </div>
        </React.Fragment>
      </AdminLayout>
    );
  }
}

export default Adminphoto;

Answer 1

изменений, которые я сделал:
1. this.state.photos чтобы быть img src
2. this.getURL() вызывается в componentDidMount()
3. <img> получает src напрямую из штата

  componentDidMount() {
    firebasePhotos.once('value').then(snapshot => {
      const photos = firebaseLooper(snapshot);

      reverseArray(photos).map(photo => {
        this.getURL(photo.image)
      })

      this.setState({
        isLoading: false,
        marginTop: '0px',
      })
    });
  }

  getURL = filename => {
    //console.log(filename);
    firebase
      .storage()
      .ref('photos')
      .child(filename)
      .getDownloadURL()
      .then(url => {
        this.setState({ photos: [...this.state.photos, url] })
      });
  };

  render() {
  ...
              this.state.photos.map((photo, i) => (
                  <div key={i} className="column">
                    <img src={photo} />
                  </div>
                ))
  ...

надеюсь, что это сработает, дай мне знать, если я не совсем ясно объяснил

Answer 2

Один из способов сделать это - сохранить URL изображения в базе данных реального времени firebase, а затем получить их из базы данных и сохранить их в состоянии.

Вы можете вручную сохранить URL-адреса в базе данных при их загрузке или записать триггеры облачных функций, которые будут сохранять URL-адреса в базе данных каждый раз, когда изображение загружается в хранилище firebase.