python - React 将 Flask 图像显示为字节码而不是图像

Question

我一直在使用 Flask 构建 Web 服务器原型(prototype)，最近改用 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'/>