Express.js问题：图片仅在单个页面渲染

这种静态资源加载的“选择性失效”确实挺让人头疼的——CSS能正常加载但图片不行，说明你的静态中间件配置大方向是对的，问题大概率出在图片路径的引用方式或者路由/中间件的顺序上。咱们一步步拆解解决：

1. 先排查最常见的问题：相对路径 vs 绝对路径 #

这是最容易踩的坑：当你在根路由/用相对路径引用图片时（比如Pug里写 img(src="images/avatar.png")），浏览器会请求http://localhost:3000/images/avatar.png，刚好匹配静态资源目录。但切换到/data或/update路由时，浏览器会把相对路径拼在当前路由后面，变成请求http://localhost:3000/data/images/avatar.png——这个路径根本不存在，自然加载失败，甚至在Sources面板里“消失”（因为请求404了）。

解决办法：把图片路径改成绝对路径，也就是开头加/：

// 正确写法：绝对路径，不管当前路由是什么，都会从根目录找静态资源
img(src="/images/avatar.png" alt="用户头像")

如果你的静态资源有子目录或者需要动态调整，也可以在Express里全局注入根路径变量：

// app.js 里添加
app.locals.baseUrl = '/'; // 如果是部署到子路径，这里改成对应路径

然后在Pug里复用：

img(src=`${baseUrl}images/avatar.png` alt="用户头像")

2. 确认静态中间件的位置是否正确 #

Express的中间件是按顺序执行的，如果你的静态资源中间件app.use(express.static(...))写在了路由定义的后面，那么当请求图片时，会先被路由匹配（比如app.get('/data', ...)），而不会走到静态资源处理逻辑。

检查并调整顺序：确保静态中间件在所有路由定义之前：

// app.js 正确顺序
const express = require('express');
const path = require('path');
const app = express();

// 先配置静态资源中间件！
app.use(express.static(path.join(__dirname, '/public')));

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

app.get('/data', (req, res) => {
  res.render('data');
});

app.get('/update', (req, res) => {
  res.render('update');
});

app.listen(3000);

3. 排除浏览器缓存和Sources面板的视觉误导 #

有时候图片其实已经正确加载了，但浏览器缓存了旧的错误路径，或者Sources面板没有实时刷新。你可以：

• 按Ctrl+F5强制刷新页面，绕过缓存
• 打开开发者工具的Network面板，过滤“Images”，查看图片请求的状态码：如果是404，说明路径还是错的；如果是200，那就是Sources面板的显示问题，刷新一下面板即可
• 在开发者工具的设置里勾选“Disable cache”，再测试路由切换

4. 最后检查图片文件的实际位置和命名 #

确认你的图片确实存在于public/images/（或你指定的子目录）下，注意文件名大小写（比如Linux服务器上Avatar.png和avatar.png是两个文件），还有文件扩展名是否正确（比如把.jpg写成.jpeg）。

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