React前端无法显示Flask返回图片，仅展示字节码问题求助

看起来你遇到的核心问题是前后端请求方式与响应处理逻辑的差异，咱们一步步拆解解决：

第一步：修正后端接口的请求方法 #

你当前的后端接口仅允许POST请求，但浏览器直接访问URL时发送的是GET请求（之前能正常显示大概率是因为没指定methods参数，Flask默认允许GET）。获取图片属于资源查询操作，用GET更符合REST规范，也更适配前端的图片展示逻辑。

修改你的Flask代码：

from flask import Flask, send_from_directory
import os

app = Flask(__name__)
# 建议使用绝对路径，避免路径遍历的安全风险
GRAPH_DIRECTORY = os.path.join(app.root_path, "graphDir")

@app.route("/graph", methods=['GET'])  # 改为GET请求
def displayGraph():
    return send_from_directory(GRAPH_DIRECTORY, "graph.png")

第二步：在React中正确展示图片 #

有两种简单的实现方式，推荐第一种：

方式1：直接用<img>标签（最便捷） #

这和你之前直接访问URL的逻辑一致，<img>标签会自动向指定URL发送GET请求，浏览器会识别响应的图片格式并直接渲染：

// React组件示例
function GraphViewer() {
  return (
    <div>
      <h3>服务器存储的图片</h3>
      <img src="/graph" alt="分析图表" style={{ maxWidth: '100%' }} />
    </div>
  );
}

export default GraphViewer;

方式2：如果必须保留POST请求（不推荐） #

如果你因业务需求必须保留POST方法，需要在React中手动处理二进制响应，转换成浏览器能识别的图片URL：

import { useState, useEffect } from 'react';

function GraphViewer() {
  const [imageUrl, setImageUrl] = useState('');

  useEffect(() => {
    fetch('/graph', { method: 'POST' })
      .then(res => res.blob())  // 将响应转为Blob二进制格式
      .then(blob => {
        const tempUrl = URL.createObjectURL(blob);  // 创建临时可访问URL
        setImageUrl(tempUrl);
      })
      .catch(err => console.error('加载图片失败:', err));
  }, []);

  // 组件卸载时释放临时URL，避免内存泄漏
  useEffect(() => {
    return () => {
      if (imageUrl) URL.revokeObjectURL(imageUrl);
    };
  }, [imageUrl]);

  return (
    <div>
      <h3>服务器存储的图片</h3>
      {imageUrl && <img src={imageUrl} alt="分析图表" />}
    </div>
  );
}

export default GraphViewer;

为什么之前正常现在不行？ #

之前直接在浏览器访问/graph时，浏览器会自动把响应的二进制数据识别为图片并渲染；但切换到React后，如果你是通过fetch/axios这类AJAX工具请求POST接口，得到的是原始二进制字节码，React不会自动处理成图片——必须手动转成可展示的URL，或者改用GET请求让<img>标签自动处理。

内容的提问来源于stack exchange，提问作者nb12345