Express嵌套子应用时图片无法显示的问题求助

问题描述 #

将leto-timetables子应用嵌入leto-main-server主应用后，单独运行子应用时图片可正常显示，但运行主应用时图片无法加载。相关代码及结构如下：

主应用代码 #

const express = require("express");
// ...
const appTimetables = require("./leto-timetables");

const app = express();
const port = 3000;

app.use("/res", express.static("leto-resources"));

// ...
app.use(appTimetables);

app.listen(port);

子应用代码 #

const express = require("express");
const { join } = require("path");

const app = express();

app.use("/timetables", express.static(join(__dirname, "html")));
app.get("/timetables", (req, res) => {
    res.sendFile(join(__dirname, "html/index.html"));
});

module.exports = app;

子应用项目结构 #

leto-timetables
├── html
│   ├── bus_filatov_lug.png
│   ├── bus_tepliy_stan.png
│   ├── canteen.png
│   ├── index.html
│   ├── monday.png
│   ├── saturday.png
│   ├── sunday.png
│   └── tuesday2friday.png
├── index.js
├── LICENSE
├── node_modules
├── package.json
├── package-lock.json
├── README.md
└── server.js

问题原因 #

核心是路径匹配不匹配：

1. 子应用内部将静态资源和页面路由都绑定在/timetables路径下。
2. 主应用直接挂载子应用后，页面访问URL为/timetables，如果HTML中图片使用相对路径（比如src="monday.png"），浏览器会基于当前页面URL向/monday.png发送请求，但静态资源实际存放在/timetables/monday.png，导致请求404。

解决办法 #

方案一：修改HTML图片路径为绝对路径 #

直接在子应用的index.html中，给所有图片路径加上/timetables/前缀，确保浏览器请求正确的静态资源路径：

<!-- 原相对路径 -->
<img src="monday.png" alt="周一时间表">

<!-- 修改为绝对路径 -->
<img src="/timetables/monday.png" alt="周一时间表">

方案二：调整子应用路由结构，由主应用统一管理前缀 #

这种方式更符合模块化挂载规范，避免子应用硬编码路径：

1. 修改子应用代码：去掉内部的/timetables前缀，让子应用路由基于自身根路径：

const express = require("express");
const { join } = require("path");

const app = express();

// 直接挂载静态资源，不指定前缀
app.use(express.static(join(__dirname, "html")));
// 处理子应用根路径的请求
app.get("/", (req, res) => {
    res.sendFile(join(__dirname, "html/index.html"));
});

module.exports = app;

2. 修改主应用代码：挂载子应用时指定/timetables前缀：

// 替换原来的app.use(appTimetables);
app.use("/timetables", appTimetables);

修改后，页面访问URL为/timetables，图片使用相对路径（src="monday.png"）时，浏览器会自动请求/timetables/monday.png，匹配静态资源路径，图片即可正常加载。

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