javascript - Gatsby 设置背景图像 CSS-In-JS(情感)

Question

以下设置不显示background-image。作为调试步骤，我尝试在 const background 中设置 background: pink，这确实有效，确认 emotion 正在正确运行。

打开 React Dev Tools 扩展时，我可以看到 background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png); 应用没有错误。

请问我的问题是什么？

我的文件结构如下所示:

frontend/
  src/
    images/
      page_background.png
      page_backgroundgradient.png
    pages/
      index.js

我正在尝试向其添加背景图像的 index.js。

...
import { css, Global } from "@emotion/core"


const background = css`
  background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);
`
<div css={background}>
   ...
</div>

Answer 1

正如您在评论中发布的链接中所述，有多种方法可以将图像/ Assets 包含在 gatsby 中:

1. 从graphql查询图片
2. 导入图片，获取路径
3. 复制图片到static目录

---

设置

假设您有这样一个组件:

// src/pages/sample.js

import React from 'react'
import { css } from '@emotion/core'

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url( ... );
`} />

查询它

公共(public)网址

如果您正在使用任何默认启动器，您的 src/images 文件夹可能已使用 gatsby-source-file-system 设置，所以 Gatsby了解你的图像。假设您知道文件的名称，您可以像这样查询它:

{
//       ⇣ `base` is file name with extension.
  file (base: { eq: "image.png" }) {
    publicURL
  }
}

如链接中所述，查询字段 publicURL 将为您提供文件名的路径:

export default ({ data }) => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(${data.file ? data.file.publicURL : 'your/fallback.png'});
`} />

export const query = graphql`
  query {
    file(base: { eq: "image.png" }) {
      publicURL
    }
  }
`

图像锐化

Gatsby 通常带有 sharp，它允许您转换图像等。举个简单的例子，此查询将图像调整为 200 像素宽度:

export const query = graphql`
  query {
    file(base: { eq: "image.png" }) {
      childImageSharp {
        fixed(width: 200) {
          src
        }
      }
    }
  }
`

您可以在 data.file.childImageSharp.fixed.src 访问它。

导入图片

让 webpack 处理它:

import myImagePath from '../relative/path/to/image.png';

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(${myImagePath});
`} />

---

复制到static目录

在您的根文件夹中创建一个名为 static 的目录，除非已经有一个目录。将您的图像复制到其中:

root
  |--src
  `--static
       `--image.png

static 中的所有文件将直接复制到构建中，因此您可以像这样链接到图像:

export default () => <div css={css`
  width: 10rem;
  height: 10rem;
  background: url(/image.png);
`} />

如果您在 gatsby-config.js 中使用 pathPrefix，请从 gatsby 导入 withPrefix 并包装它围绕图像路径。

---

这是一个 codesandbox对于前两种方法。

希望对您有所帮助!