Gatsby设置背景图片CSS-In-JS（情感）

Question

没有background-image与下面的设置可见。作为调试一步，我已经尝试设置background: pink内const background，这确实可行，确认emotion运行正常。

打开时，React Dev Tools extension我可以看到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

因此，正如您在评论中发布的链接中所述，可以通过多种方式在gatsby中包含图像/资产：

1. 从查询图像 graphql
2. import 图像，获取路径
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( ... );
`} />

查询它

公开网址

如果您使用的是任何默认启动器，则可能是因为您的src/images文件夹已设置好，gatsby-source-file-system因此盖茨比知道您的图像。假设您知道文件名，则可以像这样查询它：

{
//       ? `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，可让您变换图像及更多内容。举一个简单的例子，此查询将图像的大小调整为200px宽度：

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

所有静态文件都将直接复制以构建，因此您可以像这样链接到映像：

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

如果您在使用pathPrefix中gatsby-config.js，进口withPrefix从gatsby和它环绕图像路径。

这是前两种方法的codeandbox。

希望有帮助！