4

I deployed my static HTML website to Heroku using this tutorial (http://www.lemiffe.com/how-to-deploy-a-static-page-to-heroku-the-easy-way/) and my pictures won't show up ? It works perfect locally so I don't really understand why it doesn't when it's deployed on Heroku ?

I've also looked up every other solution that stackoverflow has to offer and nothing worked for me. Any help is really appreciated

Here is the order of my folders/files (folders are capitalized): 

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

Code for image: 

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

Whenever I inspect the element on Heroku it says : 

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

and where the picture is supposed to be I have the typical broken image link picture

4

10 回答 10

6

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

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

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

更新：

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

于 2013-07-29T16:05:48.883 回答
5

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

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

于 2014-02-17T15:16:50.993 回答
3

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

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

该图像在本地工作，但导致该目录存在于您的本地计算机上；它在 Heroku 上不存在。

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

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

于 2013-07-29T16:00:51.597 回答
3

唯一一针见血的答案：Heroku 区分大小写！

搞了半天才弄明白！

于 2017-11-09T13:17:45.547 回答
0

Heroku 对图像区分大小写，因此请确保您的所有图像都设置为小写名称。

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

于 2020-01-20T03:42:49.317 回答
0

我有同样的问题：区分大小写的 png 文件。但要解决这个问题，我建议将它们降低并更改图像文件的名称。这样，当您将它们提交到 git 并推送到 heroku 时，您可以安全（并且在您的版本中更有条理）

于 2022-02-07T14:11:45.050 回答
0

综上所述，要正确加载图片：
1) 使用相对于 index.html 的相对 url 路径
2) 图片文件扩展名需要是 png 而不是 jpg，并且要小写，例如：“cat.png”

于 2017-11-28T02:11:23.580 回答
0

好吧，每当您的网页包含 HTML、CSS 和 JavaScript 时，只需执行 2 个步骤：

1) 将一个文件命名为 index.html（保留所有内容）例如：脚本、样式表和正文。

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

然后部署在 Heroku 上，将下载的图片保存在 index.html 的一个文件夹中

因此，此方法将帮助您部署您的网页

于 2016-03-29T05:52:59.037 回答
0

如果图像尺寸很大，它不会在免费版本的 Heroku 上加载。

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

然后通过以下命令推送

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

它应该工作

于 2020-09-28T15:07:02.580 回答
-1

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

  1. 销毁heroku应用程序并创建一个新应用程序
  2. 从您的目录中删除 .git 文件夹
  3. 为您的应用创建新的 git 远程
  4. 再次推送所有文件

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

于 2018-10-02T09:38:41.573 回答