javascript - 如何加快在 React 中显示来自后端的图像的过程 (Django Rest)

Question

我在django中有一个api，我从react前端调用它，问题是api必须被无限调用，并且在react的每个请求中，总是有来自请求响应的新图像。响应即将到来速度不错，但是reactjs显示图像的速度真的很慢，我在不重新加载整个组件的情况下显示图像，并且我想在不重新加载的情况下显示它。

runInfinite=()=>{

        axios.post('http://127.0.0.1:8000/faceapp/process_image/')
            .then(res => {
                this.setState({baseimage: res.data}, () => {
                    console.log(this.state.baseimage)
                })
            });
    };

render() {

        if (this.state.flag){
            setInterval(()=> { this.runInfinite(); },1000);
        }
        return (
                  <div>
                            {this.state.baseimage?<img  src={"data:image/png;base64," +  this.state.baseimage}/>:<h1>Hello</h1>}
                  </div>

        );
    }
} 

我该怎么做才能让 React 能够以与响应相同的速度显示图像。

Answer 1

在这种情况下，React 可能无能为力。您必须根据页面本身的要求优化图像及其尺寸。

就像，您可以从检查所需的分辨率开始。

例如无需在 400*300 的占位符中加载 4000*3000 的图像。