本地正常加载的图片部署到NodeJS Heroku应用后报404错误

问题背景 #

• 技术栈：原生JavaScript + Immutable JS + Node Express 服务端，对接NASA火星探测车API
• 故障表现：本地开发环境可正常加载的assets目录下探测车展示图，部署到Heroku后加载失败，浏览器控制台报错：Failed to load resource: the server responded with a status of 404 (Not Found)，手动替换为线上绝对路径后问题仍存在
• 现有图片渲染代码：

<img src='https://mars-rover-dashboard-app.herokuapp.com/public/assets/images/${
    roverData.rover.get("name") + ".png"}' alt='rover image' class='sidebar__main-rover-img'>

故障排查方向 #

按优先级逐个核对即可定位问题：

• 静态资源路径多写了映射前缀
  Express配置静态资源服务时，express.static指定的目录就是对外访问的根路径，不需要在访问路径里带上该目录名。比如配置为app.use(express.static('public'))时，存放在public/assets/images/xxx.png的文件，对外访问路径不需要加/public前缀，正确路径为/assets/images/xxx.png。本地环境能正常加载是因为开发服务器通常做了路径兼容，Heroku运行时严格匹配Express路由规则，多写一层路径直接返回404。
• 文件名大小写不匹配
  本地Windows、macOS系统默认文件路径大小写不敏感，Heroku底层为Linux系统，严格区分路径大小写。如果代码拼接出的文件名和实际存储的图片文件名大小写不一致，比如代码返回Curiosity.png但实际文件名为curiosity.png，本地可正常加载，线上直接404。
• 静态资源未随代码部署到Heroku
  检查项目根目录的.gitignore文件，确认没有配置屏蔽public、assets目录或*.png格式文件的规则。如果静态资源被Git忽略，Heroku拉取的部署包中根本不存在对应图片，自然加载失败。可登录Heroku控制台进入应用Bash终端，执行ls public/assets/images命令查看目录下文件列表，确认图片是否存在。

修复操作 #

1. 调整Express静态资源配置，使用绝对路径避免不同环境的路径解析差异：

const path = require('path')
app.use(express.static(path.join(__dirname, 'public')))

2. 修改图片渲染路径，删除多余的/public前缀，不要硬编码域名，适配后续部署地址变更：

<img src=`/assets/images/${roverData.rover.get("name") + ".png"}` alt='rover image' class='sidebar__main-rover-img'>

3. 逐张核对3台探测车的图片文件名，确保和接口返回的name字段大小写完全一致，确认静态资源未被.gitignore屏蔽后，重新提交代码部署即可。

部署完成后可直接在浏览器访问单张图片地址验证，能正常打开图片即代表路径配置正确。

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