Question

我正在尝试从烧瓶API向我的React前端发送随机生成的图像。首先，每次生成图像时将其保存到文件系统中，然后尝试使用react访问它，但这不适用于生产版本。现在我正在使用flask的send_file（），但是我不确定在前端上做错了什么，因为这是我的第一个React项目。

在烧瓶中，我有：

@main.route('/get-image', methods=['GET'])
def get_image():

    image_array = generate_random_image()
    img = Image.fromarray(image_array)
    img.save('img.png')
    return send_file('img.png', 'image/png')

和前端

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            image: '/get-image'
        };
    }

    updateImage() {
         fetch("/get-image").then(response => {
             this.setState({image: /** not sure what to have here **/});
         })
    }

    render() {
        return (
            <div className="App">
                <Container>
                    <Row>
                        <Col>
                            <Image src={this.state.image} rounded/>
                        </Col>
                    </Row>
                    <Row>
                <Container>
                <Container>
                    <Row>
                        <Col>
                            <Button onClick={() => this.updateImage()}>Original</Button>
                        </Col>
                    </Row>
                </Container>
            </div>
        );
    }
}

可能值得注意的是，我在localhost:3000上运行React，在localhost:5000上运行flask。我在React目录的"proxy": "http://localhost:5000"中有package.json。

有什么建议吗？我在反应端尝试了很多方法，但没有任何效果。我从根本上做错了吗？

从Flask发送图像到React

0 个答案: