Node.js+EJS环境下无法加载CSS/图片，求express.static使用方法

问题核心原因 #

Express默认不会对外暴露服务器上的任何文件，所有客户端对静态资源（CSS、图片、JS等）的请求，都需要通过express.static中间件指定对应的文件目录，否则这些请求会被当成路由处理，最终返回404错误。

步骤1：配置Express静态资源中间件 #

在你的Node.js入口文件（如app.js或server.js）中，引入path模块并配置express.static：

完整示例代码

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

// 设置EJS为模板引擎
app.set('view engine', 'ejs');
// 指定EJS模板文件所在目录
app.set('views', path.join(__dirname, 'src/views'));

// 配置静态资源映射：
// 1. 图片资源：客户端访问 /images/xxx 时，对应服务器上的 src/images/xxx
app.use('/images', express.static(path.join(__dirname, 'src/images')));
// 2. CSS资源：客户端访问 /css/xxx 时，对应服务器上的 src/views/project/xxx
app.use('/css', express.static(path.join(__dirname, 'src/views/project')));

// 示例路由：渲染EJS模板（根据你的实际路由调整）
app.get('/', (req, res) => {
  // 假设你的EJS文件是 src/views/project/index.ejs
  res.render('project/index');
});

app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

步骤2：修改EJS中的资源引用路径 #

将原来的相对路径改为我们配置的静态资源路径：

图标引用修改

<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">

CSS引用修改

<link rel="stylesheet" type="text/css" href="/css/style.css">

更规范的目录结构建议 #

为了避免静态资源和模板文件混在一起，建议调整目录结构如下：

项目根目录/
├── src/
│   ├── views/
│   │   └── project/
│   │       └── index.ejs
│   └── public/
│       ├── css/
│       │   └── style.css
│       └── images/
│           └── favicon-32x32.png
└── app.js

此时静态资源配置可以简化为：

// 客户端访问 /xxx 时，对应服务器上的 src/public/xxx
app.use(express.static(path.join(__dirname, 'src/public')));

对应的EJS引用路径保持不变：

• CSS：/css/style.css
• 图标：/images/favicon-32x32.png

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