React インラインスタイルを使用して背景画像を設定する

1. React でインラインスタイルを使用して背景画像を設定する
2. インラインスタイルを使用してローカル画像を React の背景として設定する

複雑な Web アプリケーションを構築する場合、開発者は多くの場合、カスタムの背景画像を設定する必要があります。標準的なアプローチは、CSS と HTML を使用することです。

React アプリケーションを開発する場合、背景画像を設定するための多くのオプションがあります。通常の CSS ファイルを使用することも、React のインラインスタイルのような CSS-in-JS ソリューションを使用することもできます。

React でインラインスタイルを使用して背景画像を設定する

インラインスタイルを使用すると、JavaScript ファイル内で HTML または React コンポーネントのスタイルを構成できます。React クラスコンポーネントで背景画像を設定する例を次に示します。

class App extends Component {
  render() {
    const containerStyle = {
      backgroundImage:
        "url(https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg)",
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

HTML と JSX

HTML と同様に、JSX では、コンテナの style 属性を使用してインラインスタイルを定義します。ただし、HTML とは異なり、その値を単純なテキストに設定することはできません。代わりに、中括弧を使用して JavaScript 変数 containerStyle を渡します。この変数は基本的に、CSS プロパティのキーと値のペアとそれに対応する値を含むオブジェクトです。

重要な違いの 1つは、style オブジェクトのキーにスペースやその他の英数字以外の記号を含めてはならないことです。通常の CSS では、プロパティは background-image として定義されますが、JavaScript では style オブジェクトの backgroundImage プロパティになります。

CSS-in-JS ソリューションを使用するもう 1つの利点は、スタイル定義に変数参照を含めることができることです。これは、テンプレートリテラルを使用することで実現されます。次に例を示します。

class App extends Component {
  render() {
    const backgroundImageURL =
      "https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg";
    const containerStyle = {
      backgroundImage:
        `url(${backgroundImageURL})`,
      width: "600px",
      height: "600px",
    };
    return <div style={containerStyle}><h1 style={{color: "black"}}>Hi! Try edit me</h1></div>;
  }
}

この場合、スタイルは変数への変更を反映します。

インラインスタイルを使用してローカル画像を React の背景として設定する

ローカルの assets フォルダの画像を使用する場合は、import ステートメントまたは require() メソッドを使用して画像を読み込むことができます。ただし、画像の読み込みは、開発環境に webpack が含まれている場合にのみ機能します。

画像をアプリに読み込む方法を選択する場合は、相対パスを指定する必要があります。

import image from "./assets/filename.jpg"

この相対パスは、コンポーネントとアセットフォルダーの両方が src フォルダーにあることを前提としています。

画像をインポートしたら、変数を参照するのと同じように、インポートの名前（この場合は image）で画像を参照できます。アプリで使用するすべての画像は個別にインポートする必要がありますが、背景画像は 1 回だけインポートする必要があります。

別の変数を作成し、それを使用して、require() メソッドでロードされた画像値を保存することもできます。

const image = require("./assets/filename.jpg")

画像を読み込んで変数名を付けると読みやすくなり、必要に応じて自由に変更を加えることができます。