Heroku Deploy 上的图像未显示

Question

我遇到了一个问题，即在部署到 Heroku 时只显示了 1 张图像，而所有图像都显示在 localhost 上。出现的是

<div class="hero-wrap ftco-degree-bg" style="background-image: url('images/bg_1.jpg');" data-stellar-background-ratio="0.5">

我使用 url() 提取图像的位置，但我尝试在代码中执行此操作的所有其他实例（三种不同的尝试）：

<a class="img" id="albumPhoto1" style="background-image: url('../images/greenPurplegrad.jpg');"></a>
<a class="img" id="albumPhoto2" style="background-image: url('./images/yellowPinkgrad.jpg');"></a>
<a class="img" id="albumPhoto3" style="background-image: url('images/pinkBluegrad.jpg');"></a>

但如果我将网址设置为

style="background-image: url('images/bg_1.jpg");"

（与显示的第一张图像相同）图像将显示。显然我不想要所有相同的图像，所以我需要一些帮助来看看我哪里出错了。

这是 images 文件夹的图像，显​​示我将所有这些图像都放在正确的位置： Images Folder

是的，都是.jpg

可以在此处找到网络应用程序：My Web App on Heroku 如果您只是按下搜索图标，则应该会在其正下方弹出一些图像（如上所示），但它们不会弹出

编辑： 添加了文件结构的图像： Public folder with HTML and images folder

编辑 2： 需要注意的是，如果我将任何图像更改为 bg_1.jpg，它就会显示出来，但是如果我将带有 bg_1.jpg 的部分更改为任何其他图像，它就不会显示在背景上。所以我相信我的图像可能会以某种方式损坏，即使我可以在文件夹中看到它们。

Answer 1

仍然不确定是什么原因导致无法加载除 bg_1.jpg 之外的所有图像，但由于 Heroku 有其临时文件系统，我被引导相信这些图像正在从系统中删除，因为我无法调用这些图像而bg_1.jpg在程序中直接实现。

因此，我找到了一个 Online image holder + HTML 来为我存储图像，并且我可以在需要时使用 url() css 直接和新鲜地调用这些图像。这完全消除了拥有图像文件夹的需要，因为它们现在都在线。如果这样做不方便，Heroku 也会赞助 Amazon S3 来保存文件（我认为这就是它的工作原理？）。

我希望这对某人有所帮助，但我认为几年来没有其他人在使用 Heroku 时遇到过此类问题。

Answer 2

我相信是因为动态地址，当你输入"../image.jpg"或"image.jpg"时，你定义的是一个静态地址，这对于本地应用来说是实用的，但对于PHP来说不是...... ..

我不知道这是否是问题的中心，但试试这个：background: url ("/path/to/file/image.jpg")

当您键入第一个“/”时，您将获取当前文件并从该文件中搜索。