React多级路由下本地图片无法加载问题求助

问题现象 #

• 访问单级路由（如localhost:3000/courses）时，本地图片加载正常
• 访问多级路由（如localhost:3000/course/1）时，图片完全无法加载

项目目录结构 #

核心目录结构如下：

src/
├── components/
├── pages/
│   ├── Course.js  # 对应多级路由/course/:id
│   ├── Courses.js
│   ├── Home.js
│   └── ...
├── public/
│   ├── koustav.png
│   ├── sampleCourse.png
│   └── ...
├── stylesheets/
├── App.js
└── index.js

问题根源 #

你使用相对路径（如./koustav.png）引用图片，这种路径是基于当前页面URL解析的：

• 单级路由/courses下，浏览器请求localhost:3000/koustav.png，路径正确，图片可正常加载
• 多级路由/course/1下，浏览器会请求localhost:3000/course/koustav.png，该路径不存在，导致加载失败

解决方案 #

以下三种方式任选其一即可：

方式1：改用根目录绝对路径 #

将图片路径改为以/开头，直接指向public根目录：
Course.js修改示例：

const data = {
  Picture: "/koustav.png",  // 移除前缀的.，使用根路径
  // ...其他字段
};

App.js数据同理：

const my_data = [
  {
    _id: "1",
    Picture: "/sampleCourse.png",
    InstructorImage: "/koustav.png",
    // ...其他字段
  },
  // ...其他数据项
];

方式2：通过import引入图片资源 #

在组件中直接import图片，React会自动处理正确的资源路径：
Course.js修改示例：

import koustavImg from "../public/koustav.png"; // 根据实际路径调整

const data = {
  Picture: koustavImg,
  // ...其他字段
};

方式3：使用PUBLIC_URL环境变量 #

适配多部署环境时，可使用React内置的环境变量：

const data = {
  Picture: `${process.env.PUBLIC_URL}/koustav.png`,
  // ...其他字段
};

验证方法 #

修改后刷新页面，打开浏览器控制台的Network面板，确认图片请求地址为localhost:3000/koustav.png（不带路由前缀），即可确认问题解决。

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