Почему фоновое изображение не загружается?

Question

image1

Мое фоновое изображение не загружается! Кто-нибудь может сказать, что происходит? Это из-за Гэтсби? Должен ли я использовать вместо этого 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>

Answer 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 я использую двойные кавычки.