web-dev-qa-db-ja.com

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

私は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>タグに対して機能します。両者の違いを誰かが説明できますか？

例：

<img src={ Background } />は問題なく動作します。

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

javascriptreactjs
169
Kris

BackgroundImageプロパティ内の中括弧が正しくありません。

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

以下のようにES6文字列テンプレートを使用しても同じ効果が得られます。

backgroundImage: `url(${Background})`
293
rgommezz

ES5を使用している場合 - 

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

ES6をお使いの場合 - 

backgroundImage: `url(${Background})`

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

18
Rushikesh Bharad

任意の画像をフルスクリーンで設定するためのインラインスタイル：

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'
}}
10
Hitesh Sahu

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

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

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

9
Tricky

このようにbackgroundImageプロパティには代わりにテンプレートリテラル（back-tick： `...`で囲まれたもの）を使うことができます。

backgroundImage: `url(${Background})`
0
Fawaz Abdulla