無法理解背景圖像 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中資產的預期行為，請在文檔中了解更多信息：使用 Static 文件夾。

但是，在此處添加圖像並不是最佳實踐，因為它們不會使用 Gatsby 的構建時圖像處理和gatsby-image進行優化。

文檔也有很好的資源： Using Gatsby Image to prevent Image Bloat ，或者Working with images in Gatsby 。