リアクションインラインスタイルを使用してbackgroundImageを設定する

Question

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 } />がうまく動作します。

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

Answer 1

backgroundImageプロパティ内の中カッコが間違っています。

おそらくあなたは、画像ファイルローダーと一緒にWebPACKのを使用しているので、背景はすでに文字列でなければなりません： backgroundImage: "url(" + Background + ")"

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

backgroundImage: `url(${Background})` 

Answer 2

を

require()機能を使用して、イメージをコンポーネントに取り込むこともできます。

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

**中括弧の二組に注意。