MERN应用部署Heroku后图片加载失败本地运行正常如何解决？

问题根源 #

你遇到的问题核心有两点：

1. 生产环境的Express没有配置/images路径对应的静态资源服务，所有未匹配到client/build下静态资源的请求都会被返回index.html，自然无法加载图片
2. 部署后的环境缺少images文件夹，大概率是.gitignore忽略了该目录导致部署时未上传，或是images目录没有放在你配置的静态资源服务对应的路径下

解决方案 #

分两种存储场景对应处理：

场景1：图片存储在服务端根目录的images文件夹下 #

• 第一步：在Express路由最顶部添加images目录的静态服务配置，必须放在全匹配app.get('*')之前，修改后配置如下：

// 全局生效，开发和生产环境都能处理/images路径的请求
app.use('/images', express.static(path.join(__dirname, 'images')))

if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, '/client/build/')))
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'))
  })
}

• 第二步：检查项目根目录的.gitignore文件，确认没有添加/images的忽略规则，如果有就删除对应规则，重新提交代码部署即可。

场景2：图片存储在前端public/images目录下 #

• 第一步：本地执行前端打包命令npm run build，检查生成的client/build目录下是否存在images文件夹，如果不存在就确认client/public下的images目录是否正确放置
• 第二步：确认.gitignore没有忽略client/build下的images目录，重新提交部署即可。

额外注意（用户上传图片场景） #

如果你网站的图片是用户上传生成的，不要存在Heroku本地目录：Heroku的文件系统是临时的，每次应用重启、重新部署都会清空所有本地写入的文件，这种场景请改用云存储服务存储图片，数据库只存图片的访问外链，前端直接读取外链即可。

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