☰

Reactインラインスタイルで背景画像を設定する質問する

tag-icon • tag-icon javascript reactjs
Reactインラインスタイルで背景画像を設定する質問する

React 内のインライン プロパティ内で使用する静的画像にアクセスしようとしています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 } />問題なく動作します。

ありがとう！

ベストアンサー1

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

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

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

backgroundImage: `url(${Background})`

おすすめ記事