查看 Gatsby 文档，他们建议您可以像在其他任何地方一样引用背景图像：
.image {
background-image: url(./image.png);
}
他们没有涵盖的是这些图像应该存在的地方。我已经尝试将图像目录放在 src 文件夹、layout 文件夹和根文件夹中，但我不断收到错误消息：
Loader /Users/username/Sites/my-app/node_modules/url/url.js?{"limit":10000,"name":"static/[name].[hash:8].[ext]"} didn't return a function
@ ./~/css-loader!./~/postcss-loader!./src/layouts/index.css 6:400-435
使用 Gatsby 引用背景图像的正确方法是什么？
当前目录结构：
my-app
- src
-- images
--- image.png
-- layouts
--- index.css
通常，我将特定于组件的图像与它们的 JSX 和 CSS 文件以及通用/全局图像放在一个images文件夹中，因此我可能有这样的结构：
.
├── components
│ ├── button.jsx
│ ├── button.module.scss
│ └── button_icon.png
└── images
└── logo.png
要引用button_icon.png来自button.module.css我这样做：
background-image: url("./button_icon.png");
并参考logo.png来自button.module.css我这样做：
background-image: url("../images/logo.png");
更新：最近我一直在我的 Gatsby 项目中使用Emotion，这需要一种稍微不同的方法。这也适用于 StyledComponents 或 Glamour：
import background from "images/background.png"
import { css } from "@emotion/core"
// Object styles:
<div css={{ backgroundImage: `url(${background})` }} />
// Tagged template literal styles:
const backgroundStyles = css`
background-image: url(${background});
`
<div css={backgroundStyles} />
您将需要一个静态文件夹，其中包含项目中 src 文件夹之外的图像。
基本上会
my-app
- src
-- components
--- styles.scss
- static
-- images
--- image.png
要访问styles.css 或scss 中的图像，您可以这样做
background: url('/images/image.png');
或者您可以通过从 gatsby 导入 withPrefix 来访问您的 jsx/js 文件之一中的图像
import { withPrefix } from 'gatsby';
<div style={{ backgroundImage: `url(${withPrefix('/images/image.png')})` }} />
确保您定义了正确的路径，该路径相对于您的 CSS 文件所在的位置，因此该路径取决于您的文件结构。它可能是这样的background-image: url('../../imageAssets/coolImages/background.png');