我的背景图片没有在 Heroku 中显示(我没有使用 Ruby 或 Rails)

My background image is not showing in Heroku (I am NOT using Ruby or Rails)

我有一个 project deployed on heroku 没有显示背景图像。图像显示在本地主机上。我曾尝试寻找此问题的解决方案,但我发现的大多数文章都与 Ruby 或 Rails 有关,我既不使用也不熟悉。我的应用程序是一个快速应用程序,我正在使用 node-sass 编译我的 scss.

这是 pug 文件:

extends layout

block custom-styles
    link(rel='stylesheet', href='/css/blocks/gallery.css')
    link(rel="stylesheet", href="/css/blocks/hero.css")
    link(rel="stylesheet", href="/css/blocks/contact.css")
    link(rel="stylesheet", href="/css/font-awesome.min.css")

block nav
    include partials/nav-home

block content
    .hero-background
        include blocks/hero
        include blocks/skills
        include blocks/gallery2
        include blocks/contact

这就是英雄css:

/*---hero (block)---*/
#hero-jumbotron {
  height: 100vh;
  width: 100vw;
  background-color: transparent;
  color: white;
  margin: 0;
}

.hero-background {
  overflow: hidden;
  position: relative;
  background: transparent;
  width: 100%;
  /*the psuedo-elemet will-change property added for smooth-scrolling*/ }
  .hero-background::before {
    content: ' ';
    position: fixed;
    background-image: url("/images/female-developer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 75%;
    background-attachment: fixed;
    z-index: -1;
    will-change: transform;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0; }

.herotext {
  background-color: rgba(5, 5, 5, 0.4); }

下面是该元素的 chrome 开发工具样式的屏幕截图 - 原来的 css 被划掉并替换为上面的样式 - 显然 heroku 在后台执行此操作,原始 css 在本地主机上完好无损。如果您转到 url 列出的 (https://blooming-badlands-17631.herokuapp.com/images/female-developer.jpg),图像确实可以毫无问题地提供。

关于堆栈溢出的一个答案建议用 image-url 替换 url,但我想这是 ruby/rails 的事情,因为它破坏了我在本地主机上的项目。另一篇文章说要确保 url 中的大写是正确的,因为它在 Windows 平台上没问题,但是当它被移植到像 Heroku 这样的 linux 平台时,如果它的大写是不正确,所以我也验证了。

这是它应该看起来像的图片

问题是 .hero-background:before 伪元素的 z-index 为 -1,但主体不是透明的。在 localhost 上,我想这没关系,但在 heroku 上它确实如此。