为什么我无法从烧瓶中发送图像以使用“Send_file”做出反应

Question

我创建了一个反应应用程序，它从反应前端获取信息，将其发送到带有 axios 的烧瓶后端，然后处理信息并创建一个新图像。我试图让烧瓶通过 send_file 发送图像以做出反应，但我不知道该怎么做。我尝试将图像保存为 png，然后将其发送，但反应方无法使用它，因为它已编码。 这是发生了什么： 烧瓶：

img = Image.fromarray((np.uint8(cm(img)*255)))
img.save("./thenewimg.png")
return send_file('./thenewimg.png','image/png')

反应：

class App extends React.component{
onReturnProcessed = res =>{
    console.log(res.data)
    this.setState({img:res.data})
    this.setState({ImgReturned:true})
    console.log(res.data.img)
    
  }
return axios
        .post(`http://localhost:5000/time`, data, {
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        })
        .then(res => {
            this.onReturnProcessed(res);
            return res
    });
  }
render(){
return(
      
      <div>
        {this.state.ImgReturned &&
        <img src={(this.state.img)} />}
     </div>

);
}
}

React 然后将状态变量“img”设置为flask 返回的任何内容（即flask 发送给它的文件）。我尝试在图像 html 行中显示此状态变量，但它不允许我这样做。关于如何做到这一点的任何想法？

注意： 这些都不是完整的代码，但我认为它们提供了了解所做工作所需的大部分内容。

以下是记录“img”状态变量时控制台中打印的一些内容：�m�O

Answer 1

您将第二个位置参数传递给send_file，它是doesn't accept。

我想你正在寻找：

return send_file('./thenewimg.png', mimetype='image/png')

但是，当您将文件名作为第一个参数传递时，它应该会根据 .png 扩展名自动检测 mimetype，因此您可能只需：

return send_file('./thenewimg.png')