Question

我正在使用Jekyll创建一个简单的网站。我试图通过CSS background-image属性在英雄部分放置背景图像，但图像不会加载。我通过尝试使用元素将图像直接上传到HTML中来测试不同的图像，并且也不会加载。这让我质疑路径是否错误，但我似乎无法在目录结构或代码中发现错误。我在firebug中测试过，看到错误是'未能加载给定的url'。我的所有图像都位于项目的“images”文件夹中，我复制并粘贴了实际名称，以确保我输错了。这是一些相关的代码。

我的项目中此部分的文件夹结构：

_scss (folder)
  1-tools (folder)
  2-modules (folder)
    hero.scss (scss file being edited)
  3-layouts (folder)
  images (folder)
    hero.jpg (file being called)

.hero-section {
  background: url(../images/hero.jpg) no-repeat center center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

<div class="hero-section">
  <!-- background image fills the div -->
  <div class="hero-text">
    <h2>Header</h2>
    <div class="hero-talk">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
    </div>
  </div>
</div>

如果有人能指出我可能做错了什么，那将非常感激！感谢

Answer 1

我解决了这个问题。我认为这是Jekyll具体的。由于我的所有样式都被发送到另一个文件夹中的外部CSS文件，因此在最后一刻没有找到图像。我只是将我的图像文件夹移到_scss文件夹之外，以便在将所有内容推送到最终的css文件时，路径在最后一分钟是正确的。

我的图像都没有显示出来

1 个答案: