概要
Reactを使用してWebアプリケーションを開発する場合、通常、ユーザーの興味を引くために視覚的な要素を含める必要があります。 これらの視覚要素は、JPG、PNG、SVG、GIF、その他多くの種類の画像である可能性があります。
この記事では、Reactを使用して画像をインポートする方法を学び、これを実現するさまざまな方法を確認します。
外部画像とローカル画像は、Reactアプリケーションで使用するXNUMX種類の画像です。 外部画像ではインポートする必要がないため、この記事では主にローカル画像に関心があります。
外部画像は、すでに外部でホストされており、URLを介して誰でもアクセスできる画像です。一方、ローカル画像は、ローカルコンピューターまたはプロジェクトフォルダーでのみ使用でき、アプリケーションで使用したい画像です。
外部でホストされている画像を表示する方法
画像をインポートする方法を説明する前に、他の場所でホストされている画像は、HTMLで画像を使用していた場合と同じように機能することを理解することが重要です。 src の属性 img タグ：
const App = () => {
return (
<div>
<img src="https://reactjs.org/logo-og.png" alt="React Logo" />
</div>
);
};
Reactで（ローカル）画像をインポートする方法を学びましょう！
Reactで画像をインポートする方法
外部画像とは別に、Reactでの画像の使用方法は、他のフレームワークやHTMLとは大きく異なります。 これらの画像は、アプリケーションで使用する前に、まずReactにインポートする必要があります。
これは、次のXNUMXつの方法で実行できます。 import ステートメントまたはを使用して require() 関数。 両方のアプローチについて説明します。
Reactを使用して画像をインポートする方法 import ステートメント
読みやすく、理解しやすいので、 import ステートメントは、Reactでローカルに保存された画像をインポートするために最も一般的に使用される方法です。 画像は次のように扱われます デフォルトのエクスポート、およびそれらをインポートするときは、コンポーネントをインポートするのと同じ方法でインポートします。 これは、ファイルからインポートする画像への相対パスを指定することによって行われます。
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
上記のコードでは、引き続き img タグと src 属性ですが、今回は src 属性は、JSXで中括弧を使用して渡される文字列ではなく、変数を受け取ります。
注： 必要な数の画像をインポートできますが、各画像にはimportステートメントで一意の名前を付ける必要があります。そうしないと、エラーがスローされます。
ファイルの相対パスを指定および取得する方法を理解することが重要です。 そうしないと、バグやエラーが発生する可能性があります。 前の例では、画像はに保存されました /src/images.
require（）関数を使用してReactで画像をインポートする方法
require() functionは、現在のファイル以外のファイルからの外部モジュールを含めるために使用されるNode.js関数です。 それはと同じように機能します import ステートメントと画像を含めることができます：
let Logo = require('./images/react-logo.png');
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
唯一の違いは、相対パスを介して画像を必要とし、次にアクセスした変数に画像を格納した最初の行です。 img 中括弧でタグ付けします。
また、これをインラインで実行し、画像を変数に割り当てるために使用される余分な行を回避することもできます。これは必須ではないためです。
const App = () => {
return (
<div>
<img src={require('./images/react-logo.png')} alt="React Logo" />
</div>
);
};
まとめ
を使用してローカル画像をインポートする方法を学びました import ステートメントと require() この記事の機能。
