React中如何通过JSON字段设置img标签src引用本地图片

使用Flask后端返回包含filepath字段的JSON数据，React项目外部存在images文件夹存放对应图片。尝试直接用item.filepath或../../images/${item.filepath}作为img的src，能正常渲染分组和标题，但图片无法显示。

JSON数据示例：

{
    "filepath": "0.jpg",
    "group": "terminator",
    "id": "0",
    "isClicked": false,
    "title": "image_0"
},
{
    "filepath": "1.jpg",
    "group": "terminator",
    "id": "1",
    "isClicked": false,
    "title": "image_1"
}

尝试的React代码：

<ul>
  {Object.values(items).map((item) => (
    <div key={item.id}>
      <li>
        {item.group} {item.title}
      </li>
      <img src={item.filepath} alt={item.title}/>
    </div>
  ))}
</ul>

核心问题是：React前端无法直接访问项目外部的本地文件（浏览器安全限制+静态资源路径机制），必须通过后端提供静态文件访问路由，或调整文件结构配合前端配置。

方案1：通过Flask后端暴露图片访问接口 #

这是开发、生产环境通用的可靠方案：

1. 在Flask中添加静态文件路由，将外部images文件夹设为可访问的静态资源目录：

from flask import Flask, send_from_directory
import os
from flask_cors import CORS  # React和Flask端口不同时必须加，解决跨域

app = Flask(__name__)
CORS(app)  # 允许跨域请求

# 配置images文件夹的绝对路径，根据你的实际目录结构调整
IMAGE_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "../images")

@app.route('/images/<filename>')
def serve_image(filename):
    return send_from_directory(IMAGE_DIR, filename)

# 其他原有业务路由...

2. 在React中修改img的src为后端提供的图片接口地址：

// 开发环境（Flask默认5000端口）用完整地址；生产环境同域名时用相对路径
const imageSrc = `http://localhost:5000/images/${item.filepath}`;
// 生产环境同域名部署时可简化为：
// const imageSrc = `/images/${item.filepath}`;

<img src={imageSrc} alt={item.title}/>

方案2：调整文件结构+React配置（仅适用于生产部署） #

如果React打包后的build文件夹和images文件夹在同一服务器目录下：

1. 在React项目的package.json中添加"homepage": "."，确保打包后的静态资源路径相对化。
2. 修改React中的图片路径：

<img src={`../images/${item.filepath}`} alt={item.title}/>

注意：开发环境下此方法大概率无效，因为React开发服务器的根目录是项目根，而非打包后的目录，开发阶段建议用方案1。

排查要点 #

• 打开浏览器控制台的网络面板，查看图片请求的URL是否正确，是否返回404或跨域错误。
• 验证Flask配置的IMAGE_DIR绝对路径是否正确，可通过print(IMAGE_DIR)输出确认。
• 跨域场景下，必须确保Flask已开启CORS，否则浏览器会拦截请求。

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