盖茨比：用 CSS 设置背景图片答案

【问题标题】：Gatsby: Set background image with CSS盖茨比：用 CSS 设置背景图片
【发布时间】：2019-01-17 11:54:02
【问题描述】：

查看 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

【问题讨论】：

如果您在名为src 的文件夹中的CSS 文件中通过./image.png 引用图像，则图像应位于同一文件夹中，即src/image.png。

标签： css reactjs background-image gatsby

【解决方案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");

更新：最近我在我的 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} />

【讨论】：

完美，适用于 Styled 组件！我把我的图片放在根目录下的静态文件夹中。
谢谢，它适用于样式化组件。你为我节省了很多时间。
使用 svg 时这对我不起作用，我正在使用 gatsby-plugin-react-svg 加载 svgs
@jean182 你使用的插件改变了它的工作方式，所以当然它的工作方式不一样。您不会使用丰田说明书来维修林肯，对吧？如果您需要将 SVG 文件作为组件导入，请查看 gatsby-plugin-svgr（我是其中的合著者）并按照自述文件中的文档进行操作。否则放弃插件并遵循答案中显示的策略。
即使你的答案很好并且它有效，我想知道当 gatsby 网站建议使用静态文件夹时，为什么要走这条路？不想成为害虫，但我真的很想知道。

【解决方案2】：

您将需要一个静态文件夹，其中包含项目中 src 文件夹之外的图像。

基本上是这样

my-app 
- src
-- components
--- styles.scss
- static
-- images
--- image.png

要访问您的 style.css 或 scss 中的图像，您可以这样做

background: url('/images/image.png');

或者您可以通过从 gatsby 导入 withPrefix 来访问您的 jsx/js 文件之一中的图像

import { withPrefix } from 'gatsby';
<div style={{ backgroundImage: `url(${withPrefix('/images/image.png')})` }} />

【讨论】：

这帮助我找到了用于部署到 Github 页面的背景图片。

【解决方案3】：

确保您定义了正确的路径，该路径相对于您的 CSS 文件所在的位置，因此该路径取决于您的文件结构。可能类似于background-image: url('../../imageAssets/coolImages/background.png');

【讨论】：