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

Question

我一直在使用烧瓶制作Web服务器，并最近切换为我的前端的ReactJ。我正在尝试显示一个存储在我的服务器上的图像，如下所示：

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

切换到反应之前，如果我转到/图形，则图像不会显示出任何问题。但是，现在，网页永远不会重定向到/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'/>