Express静态资源加载出现404(Not Found)错误求助：为home.ejs添加静态图片失败问题排查

我来帮你一步步排查这个静态图片404的问题，大概率是文件结构和路径匹配的问题，咱们从最基础的地方开始核对：

第一步：确认项目文件结构是否匹配配置 #

首先得确保你的静态资源位置和express.static的配置对应，正确的结构应该是这样的：

你的项目根目录/
├── public/
│   ├── assets/
│   │   └── img/
│   │       └── hero.jpg
├── views/
│   └── home.ejs
├── app.js（或server.js，你的入口文件）

如果你的hero.jpg没放在public/assets/img/这个层级下，那express.static('public')肯定找不到它，这是最常见的坑。

第二步：检查Express静态资源配置的位置 #

千万要记住：静态资源的配置代码必须放在路由定义之前，否则请求会先被路由拦截，导致静态资源无法被正确处理。正确的配置示例：

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

// 先配置静态资源！
app.use(express.static('public'));

// 再定义你的路由
app.get('/', (req, res) => {
  res.render('home');
});

app.listen(3000, () => {
  console.log('Server up on port 3000');
});

第三步：核对EJS里的图片引用路径 #

在home.ejs里引用图片时，一定要注意路径开头的斜杠/，它代表从public目录的根开始查找：

<img src="/assets/img/hero.jpg" alt="Hero banner">

要是你写成assets/img/hero.jpg（没有开头的/），当页面访问的是子路由（比如/about）时，浏览器会把路径解析成/about/assets/img/hero.jpg，自然就返回404了。

第四步：排查其他容易忽略的细节 #

• 文件名大小写：在Linux或macOS系统里，Hero.jpg和hero.jpg是完全不同的文件，要确保引用的文件名和实际文件名完全一致；
• 清除浏览器缓存：有时候浏览器会缓存旧的404响应，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面试试；
• 直接测试图片URL：在浏览器地址栏输入http://localhost:3000/assets/img/hero.jpg，如果还是404，说明是服务器端的配置或文件结构问题；如果能正常显示，那就是EJS里的引用路径写错了。

按上面的步骤逐一排查，应该就能解决问题啦！

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