Question

我一直使用flask进行原型设计，最近切换到ReactJS作为我的前端。我正在尝试将存储在我服务器上的图像显示到我的网页，如下所示：

@app.route("/graph" methods=['POST'])
def displayGraph():
    return send_from_directory("graphDir", "graph.png")

在切换到React之前，如果我去/ graph，图像将显示没有问题。但是，现在网页永远不会重定向到/graph并显示图像的字节代码而不是图像本身。我需要更改什么才能在我的React网页上正确显示我的图像？作为参考，我的React代码如下：

export default class App extends React.Component {
constructor (props) {
    super(props);

    //Initialize your state here
    this.state = {
       results: "",
    };

    //bind functions here
    this.handleChange = this.handleChange.bind(this);
}

//this is called after everything is created
componentDidMount() {

}

//add functions here
//changes state of checkbox
handleChange(event) {
    const value = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
    this.setState({
        [event.target.name]: value
    });
}

submit() {
    $.ajax({
        type: "POST",
        contentType: "application/json",
        url: "/graph",
    });
}


render() {
    return (
        <div>
            <div className="big title">Title</div>
            <input type="button" onClick={() => this.submit()} value="Submit" className="button"/>
        </div>
    );
}

}

Answer 1

如果能够使用ajax调用获取图像的字节代码，则可以在渲染中添加<img>并将src设置为图像的字节代码。

<image src = 'data:image/jpeg;base64,' + 'your-image-data'/>

反应将Flask图像显示为字节代码而不是图像

1 个答案: