ReactインラインスタイルでbackgroundImageを設定する

静的画像にアクセスして、backgroundImageReact 内のインラインプロパティ内で使用しようとしています。残念ながら、私はこれを行う方法について枯渇しています。

一般に、私はあなたが次のようにしたと思った：

import Background from '../images/background_image.png';

var sectionStyle = {
  width: "100%",
  height: "400px",
  backgroundImage: "url(" + { Background } + ")"
};

class Section extends Component {
  render() {
    return (
      <section style={ sectionStyle }>
      </section>
    );
  }
}

これは<img>タグで機能します。誰かが2つの違いを説明できますか？

例：

<img src={ Background } /> 正常に動作します。

ありがとうございました！

backgroundImageプロパティ内の波括弧が間違っています。

おそらくあなたは画像ファイルローダーと一緒にwebpackを使っているので、Backgroundはすでに文字列であるはずです： backgroundImage: "url(" + Background + ")"

以下のようにES6文字列テンプレートを使用して同じ効果を実現することもできます。

backgroundImage: `url(${Background})`

ES5を使用している場合-

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

ES6を使用している場合-

backgroundImage: `url(${Background})`

基本的に、backgroundImageプロパティの動作に値を追加しながら不要な中括弧を削除すると機能します。

画像をフルスクリーンに設定するインラインスタイル：

style={{  
  backgroundImage: "url(" + "https://images.pexels.com/photos/34153/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350" + ")",
  backgroundPosition: 'center',
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat'
}}

require()関数を使用して、コンポーネントに画像を取り込むこともできます。

<div style={{ backgroundImage: `url(require("images/img.svg"))` }}>

中括弧の2つのセットに注意してください。最初のセットは反応モードに入るためのものであり、2番目のセットはオブジェクトを表すためのものです

次のbackgroundImageようなプロパティの代わりに、テンプレートリテラル（バックティック： `...`で囲まれています）を使用できます。

backgroundImage: `url(${Background})`

これを試して：

style={{ backgroundImage: `url(require("path/image.ext"))` }}

私にとってうまくいったのは、このようにすることです

style={{ backgroundImage: `url(${require("./resources/img/banners/3.jpg")})` }}

あなたは私たちを試すことができますimg

backgroundImage: url(process.env.PUBLIC_URL + "/      assets/image_location")