React によるインライン背景画像のスタイリング: 秘密を解き明かす

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 (
      

      );
    }
  }

ただし、このアプローチでは望ましい結果は得られません。重要なのは、backgroundImage を タグに使用する場合と React のインライン スタイルに使用する場合の違いを理解することです。

タグの場合、src 属性は画像パスを表す文字列を期待します。複雑な構文の必要性。ただし、要素のスタイル オブジェクトのプロパティを設定する React のインライン スタイルの場合、backgroundImage に整形式の CSS 値を指定する必要があります。

これを解決するには、内の中括弧を削除する必要があります。 backgroundImage プロパティを設定し、背景画像のパスが文字列であることを確認します。画像ローダーで Webpack を使用している場合、Background 変数はすでに文字列になっているはずで、次のように記述するだけです:

backgroundImage: "url("   Background   ")"

あるいは、ES6 文字列テンプレートを利用して同じ効果を実現することもできます。

backgroundImage: `url(${Background})`

次のガイドラインに従うことで、簡単にReact でインライン背景画像を設定し、動的で視覚的に魅力的な要素でアプリケーションを変換します。