Node.js项目中CSS及图片等静态资源无法加载问题求助

问题根源 #

1. Express静态资源挂载路径未以斜杠开头，导致路由匹配规则异常
2. EJS中使用相对路径引用静态资源，页面路由变化时会出现路径解析错误
3. 未使用绝对路径指定静态资源目录，存在路径歧义风险

具体修复步骤 #

1. 修正app.js的静态资源配置

使用path模块生成绝对路径，确保静态资源目录指向准确，同时挂载路径以斜杠开头：

const path = require('path');
const express = require('express');
const app = express();

// 正确配置静态资源：URL前缀为/static，指向server目录下的static文件夹
app.use('/static', express.static(path.join(__dirname, 'static')));

• __dirname代表当前app.js所在的/server目录，path.join拼接后得到静态资源文件夹的绝对路径，避免因启动服务的目录不同导致路径错误
• /static是URL访问前缀，所有以/static开头的请求都会被映射到静态资源文件夹

2. 修正EJS中的资源引用路径

将相对路径改为基于根URL的绝对路径，确保无论页面路由如何变化，资源路径都能正确解析：

<!-- CSS引用 -->
<link rel="stylesheet" href="/static/css/style.css">

<!-- 图片引用示例 -->
<img src="/static/img/image1.png" alt="示例图片">

验证 #

重启Node.js服务后，刷新页面，查看浏览器开发者工具的网络请求面板，确认CSS和图片的请求状态为200，即可正常加载资源。

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