[英]Gatsby set background-image CSS-In-JS (Emotion)
No background-image
visible with the setup below. 使用以下设置看不到
background-image
。 As a debugging step, I have tried setting background: pink
within const background
and this does work, confirming that emotion
is running correctly. 作为调试步骤,我尝试设置
background: pink
在const background
设置为background: pink
,这确实起作用,确认emotion
正确运行。
When opening React Dev Tools extension
I can see background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);
打开
React Dev Tools extension
我可以看到background-image: url(../images/page_backgroundgradient.png), url(../images/page_background.png);
applied without an error. 应用没有错误。
What could my issue be please? 请问我的问题是什么?
My file structure looks like below: 我的文件结构如下所示:
frontend/
src/
images/
page_background.png
page_backgroundgradient.png
pages/
index.js
My index.js
that I am trying to add a background image to. 我要向其中添加背景图像的
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>
So as stated in the link you posted in the comment, there's multiple ways to include image/assets with gatsby: 因此,如您在评论中发布的链接中所述,可以通过多种方式在gatsby中包含图像/资产:
graphql
graphql
查询图像 import
the image, get path import
图像,获取路径 static
directory static
目录 Say you have a component like this: 假设您有一个像这样的组件:
// src/pages/sample.js
import React from 'react'
import { css } from '@emotion/core'
export default () => <div css={css`
width: 10rem;
height: 10rem;
background: url( ... );
`} />
If you're using any of the default starters, it's likely that your src/images
folder has been set up with gatsby-source-file-system
so Gatsby know about your images. 如果您使用任何默认启动器,则您的
src/images
文件夹可能已使用gatsby-source-file-system
进行了设置,因此Gatsby知道您的图像。 Say you know the name of the file, you can query it like so: 假设您知道文件名,则可以像这样查询它:
{
// ⇣ `base` is file name with extension.
file (base: { eq: "image.png" }) {
publicURL
}
}
As described in the link, querying the field publicURL
will give you the path to the file name: 如链接中所述,查询字段
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 usually comes with sharp
, which allows you to transform images & more. 盖茨比通常附带
sharp
,可让您变换图像等。 For a simple example, this query resize the image to 200px width: 举一个简单的例子,此查询将图像的大小调整为200px宽度:
export const query = graphql`
query {
file(base: { eq: "image.png" }) {
childImageSharp {
fixed(width: 200) {
src
}
}
}
}
`
And you can access it at data.file.childImageSharp.fixed.src
. 您可以通过
data.file.childImageSharp.fixed.src
访问它。
Let webpack handle it: 让webpack处理它:
import myImagePath from '../relative/path/to/image.png';
export default () => <div css={css`
width: 10rem;
height: 10rem;
background: url(${myImagePath});
`} />
static
directory static
目录 Create a directory named static
at your root folder, unless there's one already. 除非已经存在,否则在您的根文件夹中创建一个名为
static
的目录。 Copy your image into it: 将图像复制到其中:
root
|--src
`--static
`--image.png
All files in static will be copy directly to build, so you can link to the image like this: 所有静态文件都将直接复制以构建,因此您可以像这样链接到映像:
export default () => <div css={css`
width: 10rem;
height: 10rem;
background: url(/image.png);
`} />
If you're using pathPrefix
in gatsby-config.js
, import withPrefix
from gatsby
and wrap it around the image path. 如果您在
gatsby-config.js
使用pathPrefix
, withPrefix
从gatsby
导入gatsby
并将其包装在图像路径周围。
Here's a codesandbox for the first 2 methods. 这是前两种方法的codeandbox 。
Hope that helps! 希望有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.