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;"/>

<强>更新：

请注意，引用的资产网址指向文件扩展名为PNG 的大写的资产。但是，文件的实际文件扩展名为png - 小写（see here）。在查找资源时，您的本地文件系统可能不敏感 - 但Heroku不是。部署到Heroku时，您需要确保正确调用正确的资源大小。

Answer 2

您正在提供图像的绝对路径：

/Users/erv/Desktop/MyProjects/resumeappcopy/public/img/PennUnitedWebsite.PNG

图像在本地工作，但是在本地计算机上存在此目录;它在Heroku上不存在。

您需要使用与Heroku /您的服务器所服务的目录相关的路径：

/../PUBLIC/img/PennUnitedWebsite.PNG （这假设您的链接存在于RESUMEAPPCOPY目录中的HTML文件中）

Answer 3

唯一正确击中头部的答案：Heroku是区分大小写的！

我花了半天时间才想出来！

Answer 4

我遇到了同样的问题，发现问题是大写的文件类型（'.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;"/>

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

Answer 5

嗯，每当您的网页包含HTML，CSS和JavaScript时，请按照以下两个步骤操作：

1）将一个文件命名为index.html（保留其中的evreything）ex：script，stylesheet＆amp;体。

2）现在，更改这些文件，复制并粘贴这些相同的文件，但将域名更改为index.php

然后在Heroku上部署，将您的图像下载到index.html

的一个文件夹中

因此，此方法将帮助您部署Web页面

Answer 6

Heroku对图像区分大小写，因此请确保所有图像均设置为小写字母。

从前端视图引用“ catPicture.png”将不起作用，但“ catpicture.png”将起作用。这是一个很大的怪癖！花了我几个小时来解决这个问题。

Answer 7

如果图像较大，它将不会以免费版本加载到Heroku中。

您可以在图像编辑器中调整图像的大小（例如：绘画）以减小尺寸，但也会降低质量。

然后通过以下命令推送

git add .
git commit -m "resize"
git push heroku master

它应该工作??

Answer 8

我最近在Windows OS上遇到了类似的问题。图片在本地测试时正确加载，但是在heroku上，某些图片正在加载，而其他图片则不在。和图片在同一文件夹中！我的路径和脚本是正确的，但是正如其他人提到的那样，这是区分大小写的问题。我重命名了文件，然后再次上传，但没有帮助。为什么？因为在Windows上更改字母大小写不会被视为git的真正更改。为了正确加载新命名的文件，我执行了以下步骤（所有命令均可在heroku教程页面上找到）：

销毁heroku应用并制作一个新应用
从目录中删除.git文件夹
为您的应用创建新的git remote
再次推送所有文件

这样，heroku文件将以您喜欢的方式具有文件名。为我工作。

HTML - 图片没有出现在Heroku上？

8 个答案: