html - 图片没有显示在 Heroku 上？

Question

我使用本教程 ( http://www.lemiffe.com/how-to-deploy-a-static-page-to-heroku-the-easy-way/ ) 将我的静态 HTML 网站部署到 Heroku，我的图片不会不露面吗？它在本地运行完美，所以我真的不明白为什么当它部署在 Heroku 上时却不行？

我还查看了 stackoverflow 必须提供的所有其他解决方案，但对我没有任何帮助。非常感谢任何帮助

这是我的文件夹/文件的顺序（文件夹大写）：

 -RESUMEAPPCOPY
  -home.html
  -portfolio.html
  -index.php
  -aboutme.html
-PUBLIC
  -IMG
  -JS
  -CSS

图片代码：

  <img src="/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

每当我检查 Heroku 上的元素时，它都会说：

 Failed to load resource: the server responded with a status of 404 (Not Found)

图片应该在哪里 我有典型的损坏图片链接图片

原文由 Erv Noel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的 <img> 标记指向本地文件系统上存在的 绝对 路径，但您的 Heroku 应用程序不存在。相反，为您的图像资产提供一个 相对 路径（相对于 调用 <img> 标记的 HTML 文件），将更改提交到版本控制，然后重新部署到 Heroku。

假设您的 public 目录实际上嵌套在 resumeappcopy 目录中，以下路径应该有效：

 <img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

更新：

请注意，引用的资产 URL 指向具有 大写 文件扩展名 PNG 的资产。但是，该文件的 实际 文件扩展名是 png – 小写（ 请参见此处）。在查找资源时，您的本地文件系统可能对大小写不敏感——但 Heroku 不是。在部署到 Heroku 时，您需要确保正确调用资源的正确大小写。

原文由 zeantsoi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我遇到了同样的问题，发现问题出在大写文件类型（’.PNG’）。我相信 Heroku 正在搜索没有应用任何 .toLowerCase() 函数的文件。这意味着您必须要求您的标记和您的文件完全匹配，并且大写很重要。

这在我的本地节点/快速服务器上不是问题，但在部署到 Heroku 后成为问题。我的一些图像出现了，但其他图像出现了 404 错误（即大写文件类型的错误）。明智的做法是始终将文件类型设置为小写。

我改变了这个：

 <img src="public/img/PennUnitedWebsite.PNG" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

对此：

 <img src="public/img/PennUnitedWebsite.png" alt="PUSA-Icon" class="img-rounded" style="height: 300px;"/>

我希望这能帮助遇到这个问题的任何人，因为它让我困惑了至少一个小时。祝你好运！

原文由 CBP 发布，翻译遵循 CC BY-SA 3.0 许可协议