[解決済み] ReactのインラインスタイルでbackgroundImageを設定する

質問

インラインで使用する静止画像にアクセスしようとしています。 backgroundImage プロパティを作成しました。残念ながら、これを行う方法については行き詰ってしまいました。

一般的には、以下のようにすればいいのでは？

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を使用しているので、背景はすでにStringであるべきです。 backgroundImage: "url(" + Background + ")"

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

backgroundImage: `url(${Background})`