从Firebase存储缓慢加载ReactJs图像

Question

我正在使用ReactJs，并且尝试从Firebase存储中获取图像，但是图像加载缓慢，我减小了图像的大小，但是没有帮助。图像文件类型为webp，大小为80kb。Network loading debug我的互联网连接也很好任何人都有解决方案吗？

下面的代码是Main.js页面的MainImage.js组件：

import  React,{ Component } from "react";
import { Container, Row, Col, Image } from "react-bootstrap";
import firebase from "../firebase";

class MainImage extends Component { 
   constructor() {
   super();
   this.state = {
   MainImage: ''
};
   this.getImage('MainImage');
}
  getImage(image) {
  let { state } = this
     firebase
     .storage()
     .ref("images")
     .child(`${image}.webp`)
     .getDownloadURL()
     .then((url) => {
     state[image] = url;
    this.setState(this.state);
   })
    .catch((error) => {
    // Handle any errors
   });
}

  render() {
   return (
     <div className="MainImage">
    <Container>
      <Row>
        <Col>
          <Image src={this.state.MainImage} fluid></Image>
        </Col>
      </Row>
    </Container>
  </div>
  );
 }
 }
    export default MainImage;