React Image src

1. React で create-react-app パッケージを使用してローカル画像を参照する
2. React の import ステートメントを使用して画像をロードする
3. React の require() メソッドを使用して画像をロードする
4. React における import と require() の仕組み

React を初めて使用する場合は、React が JSX と呼ばれる HTML のような構文を使用していることに気付いたと思います。この構文は、React アプリケーションを作成する簡単な方法を提供します。アプリに画像を含めることになると、物事は少し泥だらけになります。HTML とは異なり、React コードは、ユーザーに表示される前に多くの変更が加えられます。

現像モードから本番モードに切り替えると、画像の相対的な位置が変わる場合があります。React コンポーネントに画像をインポートして含めるための信頼できる方法が必要です。

React で create-react-app パッケージを使用してローカル画像を参照する

React アプリケーションを開発する場合、開発環境に webpack が含まれている限り、イメージを簡単に含めることができます。create-react-app パッケージを使用すると、webpack が自動的に含まれます。

JSX の要素タグは HTML の場合と同じように機能します。これは、自己終了型の img タグです。開発者は、src 属性を使用してパスを指定できます。この例では、img 要素はハードコードされた画像 URL をソースとして使用します。

class App extends Component {
  render() {
    return <img src="https://cdn.pixabay.com/photo/2021/09/02/16/48/cat-6593947_960_720.jpg"/>
  }
}

フォルダ内の画像の場所への相対パスを指定する場合は、少し複雑になります。画像のソースを提供することは、src 属性をコンピューター上の相対ファイルパスに等しく設定するほど簡単ではありません。まず、サンドボックス化されたブラウザは、コンピュータの src 相対ファイルパスにアクセスできません。特に、アプリケーションがデプロイされた後は、ローカルパス名に依存することはできません。代わりに、開発者は import または require() ステートメントを使用してイメージをロードする必要があります。

create-react-app プロジェクトを開発するときは、すべての画像を保存するためのアセットフォルダーを用意することをお勧めします。通常、このフォルダーはプロジェクトの src フォルダーに作成されます。画像を保存するためにこの規則に従っていると仮定して、画像をインポートして src 属性の値として使用する方法を見てみましょう。

React の import ステートメントを使用して画像をロードする

import ステートメントを使用して画像をロードすることもできます。見た目は簡単で、ハードコードされた URL と同じ目標を達成します。

import React, { Component } from "react";
import image from "./assets/cat.jpg";
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

有効なパスを指定する限り、create-react-app に画像が表示されます。

この場合、testComponent フォルダーと assets フォルダーの両方が src フォルダーにあるため、パスは機能します。パスの終わり-cat.jpg は、個々のファイルの名前にすぎません。

import ステートメントは、インポートされたアセットを変数に格納するという追加の利点を提供します。src 属性に値を設定する場合、import ステートメントから変数名を参照できます。

インポートの詳細については、こちらを参照します。

React の require() メソッドを使用して画像をロードする

React 開発者は、require() メソッドを使用してさまざまなタイプのモジュールをロードします。画像の読み込みにも使用できます。

JSX 内で使用する場合は、require() メソッドを中括弧の間に配置する必要があります。ご存知かもしれませんが、中括弧の間のコードは、JSX では有効な JavaScript として解釈されます。

<img src={require("./assets/cat.jpg").default} />

require() メソッドは、画像への有効な相対パスである 1つの引数を取ります。また、一部のブラウザでは、返されたオブジェクトの .default プロパティにアクセスする必要があることに注意してください。

または、image 変数を作成して画像を保存し、それをコンポーネントで参照することもできます。次に例を示します。

const image = require("./assets/cat.jpg").default;
export default class testComponent extends Component {
  render() {
    return (
      <div>
        <img src={image} />
      </div>
    );
  }
}

変数には任意の名前を付けることができます。画像と呼ぶ必要はありません。

React で JavaScript 変数を参照する場合は、中かっこで囲む必要があることに注意してください。

パフォーマンスに関しては、require() メソッドと import ステートメントの間に違いはありません。

React における import と require() の仕組み

一部の React 開発者は、webpack（および他のバンドラー）が JavaScript や React ではなく画像の読み込みを処理することに驚くかもしれません。

コンポーネントに画像をロードすると、バンドラーはコンポーネントと画像の間の関連付けを内部的に記録します。その後、アセットを入手してコピーし、一意の名前を付けて、サーバー上のアクセス可能なディレクトリに配置します。