web-dev-qa-db-ja.com

reactjsで背景画像を設定する方法は？

Reactjs/webpackアプリがあり、bodytagの背景画像を設定しようとしています：

body{
    background: url("../images/some-background.jpg");
    background-size:contain;
    background-position:top;
    background: cover;
}

ただし、コンポーネントをロードした後、ページにはボディスタイルが表示されませんが、コンソールには表示されます。 webpackによってロードされるCSSファイルにCSSルールを設定しながら、メインページに背景画像を表示する方法はありますか？

cssreactjswebpack
7
bier hier

プロジェクトのパブリックフォルダーに画像を配置する必要があります。次に、次のように入力してアクセスできます。

_<img src="/background.jpg" />_

CSSについても同じことが言えます

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

4
Richard Bonneau

こちら はシンプルなgithubリポジトリで、bodyタグに背景画像を置くために作成しました。この例には、CSS専用のwebpack configに追加された変更/プラグインはありません。

あなたのコードで、私のものと似たリポジトリ構造を持っている場合、それはパスの問題である可能性があります。これでクエリが解決されることを願っています。

2
Upasana

背景はすでに文字列でなければなりません：

backgroundImage: "url(" + Background + ")"

ES6文字列テンプレートを使用することもできます。

backgroundImage: `url(${Background})`

これを読んでください-

https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1
Stacy Chen

背景画像を正しく読み込むためにwebpackを取得する際に一貫して問題がありました。 webpack 2で修正されたのかもしれませんが、まだ使用していません。私はcopy-webpack-plugin画像をディレクトリにコピーし、CSSでその場所を参照します。

new CopyWebpackPlugin([
        { from: './src/images', to: 'images' }
])
0
genestd

CSS：

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

反応：

import React from 'react';
import logo from './logo.png';  // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png

function Header() {   // Import result is the URL of your image  
  return <img src={logo} alt="Logo" />;
}

export default Header;
0
enso

これは、webpackを使用しているため、スタイルシートをcss or scss files。つまり、app.jsにインポートします。そのため、webpackはsass-loader or css-loader開発環境にいるときにcssファイルをバンドルします。

そのため、すぐには動作しません。ブラウザは最初にbundle.jsをロードし、jsファイルを実行し、スタイルシートを生成してヘッダーに挿入します。

すぐに作業したい場合は、htmlファイルにスタイルシートを書く必要があります。

また、背景画像の読み込みにも時間がかかることを忘れないでください。

0
chenkehxx