web-dev-qa-db-ja.com

Gatsby：CSSを使用して背景画像を設定する

Gatsbyのドキュメントを見ると、他の場所と同じように背景画像を参照できることが示唆されています。

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

彼らがカバーしていないのは、これらの画像がどこにあるべきかということです。 srcフォルダー、レイアウトフォルダー、およびルートフォルダーにイメージディレクトリを配置しようとしましたが、エラーが発生し続けます。

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

Gatsbyを使用して背景画像を参照する適切な方法は何ですか？

現在のディレクトリ構造：

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

一般に、コンポーネント固有の画像をJSXファイルとCSSファイル、および一般/グローバル画像と一緒にimagesフォルダーに保管するため、次のような構造になる可能性があります。

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

参照する button_icon.png from button.module.css私はこれをするだろう：

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

参照するにはlogo.png from button.module.css私はこれをするだろう：

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

更新：最近、Gatsbyプロジェクトで Emotion を使用していますが、これには少し異なるアプローチが必要です。これは、StyledComponentsまたは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

CSSファイルがある場所を基準とした相対パスで定義された正しいパスがあることを確認してください。パスはファイル構造に依存します。 background-image: url('../../imageAssets/coolImages/background.png');のようなものかもしれません

2
Nunchucks