Express多页面场景下前端图片加载路径错误问题咨询

问题场景 #

在三个不同路径的页面加载图片时出现异常：

• 首页 /：图片请求路径为 /image/123，加载正常
• 个人主页 /profile：请求路径变为 /profile/image/123，无法加载
• 好友个人主页 /friends/profile：请求路径变为 /friends/profile/image/123，无法加载

相关代码 #

后端Express路由

router.get("/image/:id", async (req, res) => {
    const recipe = await Recipe.findById(req.params.id);
    res.set("Content-Type", "image/png");
    res.send(recipe.image);
});

前端图片组件代码

<img src={process.env.NODE_ENV === "production" ? "/image/123" : `http://localhost:5000/image/123`} alt="example"/>

原因分析 #

核心问题是前端路径解析逻辑异常：

• 当页面处于子路径（如/profile）时，若前端项目的公共路径配置为相对模式（比如React项目package.json里的"homepage": "."），浏览器会把/image/123错误解析为相对当前页面路径的地址，而非基于域名根目录的绝对路径。
• 另外需确认Express路由是否挂载在根路径下，若挂载在子路径也会导致后端无法匹配请求，但从现象判断主要是前端路径解析问题。

解决方案 #

方案1：修正前端项目公共路径配置 #

如果是React/Vue等单页应用，确保公共路径配置为根路径：

• React项目：在package.json中设置"homepage": "/"（或直接删除该配置，默认即为根路径）
• Vue项目：在vue.config.js中设置publicPath: "/"

配置后，前端生成的所有绝对路径都会基于域名根目录，不受当前页面路由影响。

方案2：统一使用完整API根路径 #

不管开发还是生产环境，都使用包含域名的完整路径，彻底规避相对路径解析问题：

// 统一配置API根地址
const API_ROOT = process.env.NODE_ENV === "production" 
  ? "https://your-production-domain.com" 
  : "http://localhost:5000";

// 拼接图片路径
<img src={`${API_ROOT}/image/123`} alt="example"/>

方案3：确认Express路由挂载位置 #

确保处理图片请求的路由挂载在根路径下，而非子路径：

// 正确挂载方式（路由基于根目录）
const imageRouter = require("./routes/image");
app.use("/", imageRouter);

若路由挂载在/profile等子路径下，后端只会响应/profile/image/:id这类请求，不符合需求，必须挂载在根路径。

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