css - Gatsby :使用 CSS 设置背景图片

Question

查看 Gatsby 文档，他们建议您可以像在其他任何地方一样引用背景图像:

.image {
  background-image: url(./image.png);
}

它们没有涵盖的是这些图像应该存在的位置。我试过将图像目录放在 src 文件夹、布局文件夹和根文件夹中，但我不断收到错误消息:

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

Answer 1

通常，我将组件特定的图像与它们的 JSX 和 CSS 文件以及通用/全局图像一起保存在 images 文件夹中，因此我可能有这样的结构:

.
├── components
│   ├── button.jsx
│   ├── button.module.scss
│   └── button_icon.png
└── images
    └── logo.png

要从 button.module.css 引用 button_icon.png 我会这样做:

background-image: url("./button_icon.png");

要从 button.module.css 中引用 logo.png 我会这样做:

background-image: url("../images/logo.png");

---

更新:最近我一直在使用 Emotion在我的 Gatsby 元素中，这需要稍微不同的方法。这也适用于 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} />