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 应用程序不存在。相反，为您的图像 Assets 提供一个相对路径(相对于调用<img>标记的HTML文件)，将更改提交到版本控制，然后重新部署到 Heroku。

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

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

更新:

请注意，引用的 Assets URL 指向文件扩展名为 PNG 的 Assets 大写。但是，该文件的实际 文件扩展名是png – 小写 ( see here )。在查找资源时，您的本地文件系统可能对大小写不敏感——但 Heroku 不是。部署到 Heroku 时，您需要确保正确调用资源的正确大小写。