如何解决从Firebase存储缓慢加载ReactJs图像
我正在使用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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。