Live Heroku 应用程序除了背景图像（React/Node.js）之外的所有图像都损坏了答案

【问题标题】：Live Heroku App has all broken images except background image (React/Node.js)Live Heroku 应用程序除了背景图像（React/Node.js）之外的所有图像都损坏了
【发布时间】：2020-06-21 01:09:39
【问题描述】：

当网站上线时，除了用 CSS 硬编码的背景图片之外的所有图片都会出现损坏。

我从 Github 上的 master 分支构建应用程序。在存储库上，所有图像都可以正常加载，并且扩展不会损坏/与背景图像不同。背景图片与其他图片位于同一目录中，并且当我托管在 Netlify 上时工作正常。

在控制台上，图像出现 404 错误。

有什么想法吗？

现场直播：https://deathless-studio.herokuapp.com/#/

图像所在的存储库：https://github.com/matthew-devonport/DEATHLESS-Portfolio/tree/master/server/public/Images

谢谢！

【问题讨论】：

标签： node.js reactjs heroku

【解决方案1】：

仅使用 Heroku 是不可能的。因为 Heroku 文件系统是短暂的
https://help.heroku.com/K1PPS2WM/why-are-my-file-uploads-missing-deleted

您可以使用

S3 文件上传
https://devcenter.heroku.com/articles/s3-upload-node
Cldinary 附加组件
https://elements.heroku.com/addons/cloudinary

祝你好运:)

【讨论】：

这与临时文件系统无关。他提交/版本化了文件。临时文件是指在运行时创建的临时文件。它们不会在重新启动时保存。
等等，我不是从网站上传图片，这些图片都是静态的，就像背景一样。可能是组件上传图片路径不正确？
@Matthew-Devonport 不客气，我希望对这个问题有更多好处
@TinNguyen 是的，我看到你以正确的方式解决了。感谢反馈和解决方案
@Matthew-Devonport 是的，正如你所想:) .problem 是一条路径。我感谢 Tin

【解决方案2】：

您的网络客户端正在通过

调用图像

https://deathless-studio.herokuapp.com/IMAGES/Shop-Pics-Logo.jpg

而不是

https://deathless-studio.herokuapp.com/Images/Shop-Pics-Logo.jpg

（试试链接。你可以看到图片在那里。只是指定的路径不正确。）

如果您执行F12 或 ctrl+shift+i 并打开网络选项卡，您会看到失败的 API 调用：

这是你的 git 存储库：

【讨论】：