无法理解背景图像 url 如何在 Gatsby.js 中工作

Question

I am learning Gatsby. I have a component called Hero which is for displaying a banner for the blog I am building.

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;

I'm using the screenshot to show the folder structure

according to the structure, in order to reach the background image I need a url like this

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

And that's what the IDE prompted me to type when trying to reach the image file. However this url doesn't work as expected. There's no background image showing. and I changed it to

`images/plans-background.jpg`

The background image showed up magically.

So I don't understand why this url is working. Is it something special about the folder static or is Gatsby doing something behind the scene?

Also when I opened up the devtool to inspect the resources that got loaded, I didn't find this static file, neither the background image file.

I am really trying to understand how these pieces work together

Answer 1

Yes, this is the expected behavior for your assets in /static , read more about it in the docs: Using the Static Folder .

However, adding your images there is not a best practice because they won't be optimized with Gatsby's build time image processing and gatsby-image .

The docs also have good resources for this: Using Gatsby Image to Prevent Image Bloat , or Working with images in Gatsby .