reactjsで背景イメージを設定するには？

Question

は私がreactjs/WebPACKのアプリを持っており、BodyTagをのための背景画像を設定しようとしている：

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

しかしpage.Itはしかし、コンソールに表示さでボディスタイルが存在しないコンポーネントをロードした後。 webpackによって読み込まれたCSSファイルにCSSルールがある間、メインページに背景イメージを表示する方法はありますか？これはreactjsが私が気づいていないことをしているのですか？

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

あなたが使用することもできES6の文字列テンプレート： -

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

backgroundImage: `url(${Background})` 

あなたがこれを読んでください、それが役立つかもしれない

Answer 1

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

Answer 2

webpackを使用しているため、css or scss filesにスタイルシートを書くことができます。それはあなたがあなたのapp.jsにそれをインポートすることを意味します。 webpackはあなたが開発環境にいるときにあなたのCSSファイルを束ねるためにsass-loader or css-loaderを使用します。

すぐには動作しません。ブラウザはまずbundle.jsを読み込み、exec jsファイルを読み込み、スタイルシートを生成してヘッダに挿入します。

すぐに作業したい場合は、自分のスタイルシートをHTMLファイルに書き込む必要があります。

また、背景画像を読み込むのに時間がかかることを覚えておいてください。

Answer 3

Hereは、単純なgithubリポジトリです。bodyタグに背景イメージを配置するために作成しました。この例ではwebpack configにcssのために特別に変更/プラグインを追加していません。

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

Answer 4

バックグラウンドイメージを正しくロードするためにwebpackを取得する際に問題が発生しました。 webpack 2で修正されているかもしれませんが、まだ使用していません。私はcopy-webpack-pluginを使って画像をディレクトリにコピーした後、その場所をCSSで参照することに戻りました。

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