为什么背景图片不加载？答案

【问题标题】：Why background image do not load?为什么背景图片不加载？
【发布时间】：2020-02-25 16:44:07
【问题描述】：

我的背景图片无法加载！谁能告诉发生了什么？是因为盖茨比吗？我应该改用 gatsby-image 吗？

    background-image: url('/src/components/images/header.png');
    background-size: cover;
    background-position: center;
    width: 100%;
  }

<div id="page">
     <div className='header'>
        <h1>Header</h1>
      </div>
      <div>
        <h1>About</h1>
      </div>
      <div>
        <h1>Projects</h1>
      </div>  
     </div>

【问题讨论】：

您提供背景图像的 div 是否包含任何数据或是否为空？如果为空，请查看此链接stackoverflow.com/questions/11963687/…
并且不要在 URL 中使用 localhost，否则您将使其生效，您必须使用域名进行所有更改。
我没有使用 localhost url，浏览器假定为 localhost，我认为这就是为什么我的图像不加载
您提供背景图片的 div 是否包含任何数据或是否为空？
nop div 有一个 h1

标签： css background-image gatsby gatsby-image

【解决方案1】：

我们并没有您的代码，因此我们不知道您使用的是哪个代码。但我们确实知道哪些代码有效，如下所示：

.header {
  background-image: url("https://i.stack.imgur.com/YLMDq.jpg?s=48&g=1");
  background-size: cover;
  background-position: center;
  width: 100%;
}

<div class="header">
  <h1>Header</h1>
</div>

主要区别可能是在 CSS 中我使用了双引号。

【讨论】：