ReactJS - 在加载图像之前显示预加载器

Question

我有这个组件，它在其中呈现来自 json 的数据。一切正常。但我想插入一个加载器： <i className="fa fa-spinner"></i>在加载图像之前。加载器也应该在之后消失。我怎样做？

import React, { Component } from 'react'

var data = require('./db.json');

class Biografy extends Component {

  constructor(props) {

    super(props)

    this.state = {

      photo: ""

    }

  }

  componentDidMount() {

    this.setState({

      photo: data.biography[0].photo

    })

  }

  render() {

    return (

      <div>

        <i className="fa fa-spinner"></i>

        <img src={this.state.photo && `/images/${this.state.photo}`} alt="" />

      </div>

    )

  }

}

export default Biografy