如何在Heroku服务器上通过express.static正确托管静态资源？

问题核心原因 #

你的问题出在静态资源的路径引用方式和开发/生产环境启动Node进程的目录差异两个关键点上：

• 模板里使用了相对路径../public/images/...，这个路径的解析完全依赖当前页面的URL，在开发环境中可能刚好匹配路由，但生产环境下页面通常以根路径/访问，浏览器对相对路径的解析会出现偏差；
• 你提到的文档说明“传递给express.static的路径相对于启动Node进程的目录”——开发时你大概率是直接在src目录下运行node server.js，但Heroku默认是从项目根目录启动进程（比如执行node src/server.js）。不过这部分你的express.static配置其实是正确的，因为__dirname始终指向server.js所在的src目录，所以path.join(__dirname, 'public')始终能正确指向src/public。

具体解决方案 #

1. 把模板中的图片路径改为绝对路径

修改index.js里的图片标签，用绝对路径替代相对路径：

<img src="/public/images/some_type/some_image.png">

你已经通过express.static把/public挂载为静态资源的访问前缀，使用绝对路径/public/...可以确保浏览器不管当前页面在什么路由下，都能精准定位到静态资源。

2. 优化express.static的路径解析（可选，更稳妥）

虽然当前配置没问题，但可以用path.resolve强制生成绝对路径，彻底规避任何可能的路径解析歧义：

server.use('/public', express.static(path.resolve(__dirname, 'public')))

为什么开发环境正常，生产环境失效？ #

开发环境中，你可能是在浏览器中访问带有子路径的URL（比如http://localhost:3000/src/），这时候相对路径../public会被浏览器正确解析为http://localhost:3000/public。但部署到Heroku后，页面路由通常是根路径/，浏览器解析../public时会尝试跳转到根目录的上一级（这显然不存在），最终解析出错误路径导致404。

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