javascript - react 应用程序 : Images from firebase are not shown on a page

Question

我想在页面上显示来自 firebase 的图像。我可以成功地从存储中获取 url，但是当我在图像中使用它们作为 src 时，它们(图像)不会显示。 从上图中可以看出，图像标签是空白的。我不知道出了什么问题。可以建议我一条出路。我的代码如下:

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>
                ))
  ...

希望它能起作用，让我知道我是否不太清楚解释