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)

如果图片应该是我有典型的破碎图像链接图片

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时,您需要确保正确调用正确的资源大小.

Answer 2

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

这在我的本地节点/express 服务器上不是问题，但在部署到 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;"/>

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