问题
Looking at the Gatsby docs, they suggest that you can reference background images like you would anywhere else:
.image {
background-image: url(./image.png);
}
What they don't cover is where these images should live. I've tried placing the image directory in the src folder, in the layout folder, and in the root folder, but I keep getting the error:
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
What's the proper way to reference a background image using Gatsby?
Current directory structure:
my-app
- src
-- images
--- image.png
-- layouts
--- index.css
回答1:
Generally I keep component-specific images alongside their JSX and CSS files and general/global images in an images
folder, so I might have a structure like this:
.
├── components
│ ├── button.jsx
│ ├── button.module.scss
│ └── button_icon.png
└── images
└── logo.png
To reference button_icon.png
from button.module.css
I would do this:
background-image: url("./button_icon.png");
And to reference logo.png
from button.module.css
I would do this:
background-image: url("../images/logo.png");
Update: Lately I've been using Emotion with my Gatsby projects, which requires a slightly different approach. This would work with StyledComponents or Glamor as well:
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} />
回答2:
Make sure you have the correct path defined with the path being relative to wherever your CSS file is, so the path depends on your file structure. It might be something like background-image: url('../../imageAssets/coolImages/background.png');
回答3:
You will need a static folder that has images outside the src folder in your project.
Basically it will be
my-app
- src
-- components
--- styles.scss
- static
-- images
--- image.png
to access the image in your styles.css or scss you can just do this
background: url('/images/image.png');
or you can access the image in one of your jsx/js files by importing withPrefix from gatsby
import { withPrefix } from 'gatsby';
<div style={{ backgroundImage: `url(${withPrefix('/images/image.png')})` }} />
来源:https://stackoverflow.com/questions/51776791/gatsby-set-background-image-with-css