web-dev-qa-db-fra.com

Gatsby: définir l'image d'arrière-plan avec CSS

En regardant les documents Gatsby, ils suggèrent que vous pouvez référencer des images d'arrière-plan comme vous le feriez ailleurs:

.image {
  background-image: url(./image.png);
}

Ce qu'ils ne couvrent pas, c'est où ces images devraient vivre. J'ai essayé de placer le répertoire d'image dans le dossier src, dans le dossier de mise en page et dans le dossier racine, mais je reçois toujours l'erreur:

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

Quelle est la bonne façon de référencer une image d'arrière-plan à l'aide de Gatsby?

Structure de répertoire actuelle:

my-app
- src
-- images 
--- image.png
-- layouts
--- index.css
cssreactjsbackground-imagegatsby
7
Aaron Benjamin

En général, je garde des images spécifiques aux composants à côté de leurs fichiers JSX et CSS et des images générales/globales dans un dossier images, donc je pourrais avoir une structure comme celle-ci:

.
├── components
│   ├── button.jsx
│   ├── button.module.scss
│   └── button_icon.png
└── images
    └── logo.png

Pour référencer button_icon.png de button.module.css Je ferais ceci:

background-image: url("./button_icon.png");

Et pour référencer logo.png de button.module.css Je ferais ceci:

background-image: url("../images/logo.png");

Mise à jour: récemment, j'utilise Emotion avec mes projets Gatsby, ce qui nécessite une approche légèrement différente. Cela fonctionnerait également avec StyledComponents ou 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} />
14
coreyward

Assurez-vous que le chemin correct est défini, le chemin étant relatif à l'emplacement de votre fichier CSS, le chemin dépend donc de la structure de votre fichier. Cela pourrait être quelque chose comme background-image: url('../../imageAssets/coolImages/background.png');

2
Nunchucks