Не могу понять, как работает URL-адрес фонового изображения в Gatsby. js

Question

Я изучаю Гэтсби. У меня есть компонент под названием Hero, который предназначен для отображения баннера для блога, который я создаю.

import React from 'react';
import styled from '@emotion/styled';
import { Link, graphql, useStaticQuery } from 'gatsby';

const ImageBackground = styled('div')`
  background-image: url('images/plans-background.jpg'); <--- this url doesn't make sense to me
  background-position: top 20% center;
  background-size: cover;
  /* background-color: red; */
`;

const Hero = () => {
  return (
    <ImageBackground>
      <h1>Frontend Masster dsfsdfsd</h1>
      <p>
        hello
        <Link to="/about">learn about me</Link>
      </p>
    </ImageBackground>
  );
};

export default Hero;

Я использую снимок экрана, чтобы показать структуру папок

в соответствии со структурой, чтобы добраться до фонового изображения, мне нужен URL-адрес, подобный этому

`../../../static/images/plans-background.jpg`

И это то, что IDE предложила мне ввести при попытке доступа к файлу изображения. Однако этот URL-адрес работает не так, как ожидалось. Фоновое изображение не отображается. и я изменил его на

`images/plans-background.jpg`

Фоновое изображение появилось волшебным образом.

Я не понимаю, почему этот URL работает. Что-то особенное в папке static или Гэтсби что-то делает за кулисами?

Также, когда я открыл devtool для проверки загруженных ресурсов, я не нашел этот файл static , ни файл фонового изображения.

Я действительно пытаюсь понять, как эти части работают вместе

Answer 1

Да, это ожидаемое поведение для ваших активов в /static, подробнее об этом читайте в документации: Использование Stati c Папка .

Однако добавление изображения - это не лучшая практика, потому что они не будут оптимизированы с помощью обработки изображений времени сборки Gatsby и gatsby-image.

В документации также есть хорошие ресурсы для этого: Использование Gatsby Image для предотвращения раздувания изображений или Работа с изображениями в Gatsby .