Reactで画像を表示する方法
2024-08-25
Reactでローカル画像を参照する方法を日本語で解説
Reactでは、ローカル画像を参照してコンポーネントに表示することができます。以下にその方法を説明します。
画像ファイルをプロジェクトに配置する
- プロジェクトの適切なフォルダ（例えば、
src/images）に画像ファイルを保存します。
画像ファイルをインポートする
- コンポーネントファイルで、
import文を使用して画像ファイルをインポートします。import myImage from './images/my-image.jpg';
画像をコンポーネントに表示する
imgタグを使用して、インポートした画像をコンポーネント内に表示します。return ( <div> <img src={myImage} alt="My Image" /> </div> );src属性にインポートした画像の変数を指定します。alt属性は、画像が読み込めなかった場合に表示される代替テキストです。
例
import React from 'react';
import myImage from './images/my-image.jpg';
function MyComponent() {
return (
<div>
<h1>My Component</h1>
<img src={myImage} alt="My Image" />
</div>
);
}
export default MyComponent;
注意
alt属性はアクセシビリティのために重要です。適切な代替テキストを設定してください。- 画像ファイルが正しいパスにあることを確認してください。
- 画像ファイルのパスは、プロジェクトのルートディレクトリを基準として指定します。
コード例1: 基本的な画像表示
import React from 'react';
import myImage from './images/my-image.jpg';
function MyComponent() {
return (
<div>
<h1>My Component</h1>
<img src={myImage} alt="My Image" />
</div>
);
}
export default MyComponent;
解説
<img src={myImage} alt="My Image" />:src属性にmyImage変数を指定することで、インポートした画像のURLを指定しています。alt属性は、画像が読み込めなかった場合や、視覚障がいを持つユーザーのために表示される代替テキストです。
import myImage from './images/my-image.jpg';:./images/my-image.jpgのパスにある画像をmyImageという変数にインポートしています。./は現在のファイルからの相対パスを表します。
コード例2: public フォルダを利用した画像参照
import React from 'react';
function MyComponent() {
return (
<div>
<h1>My Component</h1>
<img src="/images/my-image.jpg" alt="My Image" />
</div>
);
}
export default MyComponent;
- この方法は、画像ファイルのパスが固定で、ビルド時に変更されない場合に便利です。
publicフォルダ内のファイルは、ビルド時にbuildフォルダのルートにコピーされるため、src属性に相対パスを指定する必要がありません。- 画像ファイルを
publicフォルダに配置した場合、src属性に/images/my-image.jpgのように絶対パスを指定できます。
コード例3: 動的な画像パス
import React, { useState } from 'react';
function MyComponent() {
const [imageUrl, setImageUrl] = useState('/images/image1.jpg');
const handleImageChange = (event) => {
setImageUrl(event.target.value);
};
return (
<div>
<input type="text" value={imageUrl} onChange={handleImageChange} />
<img src={imageUrl} alt="Dynamic Image" />
</div>
);
}
export default MyComponent;
imgタグのsrc属性にimageUrlをバインドすることで、入力されたURLの画像が表示されます。input要素の値が変更されると、handleImageChange関数が呼び出され、imageUrlの状態が更新されます。useStateを使って、画像のURLを状態管理しています。
どちらのコード例を選ぶべきか？
- 画像の数が多く、動的に画像を切り替えたい場合
import文を使って画像をインポートする方法が柔軟です。 - 画像の数が少ない場合や、パスが固定の場合
publicフォルダを利用する方法がシンプルです。
- 画像のレスポンシブデザイン
imgタグにwidthやheight属性を指定することで、画像のサイズを調整することができます。 - 画像フォーマット
Webでよく利用される画像フォーマットは、JPEG、PNG、SVGなどがあります。 - 画像の最適化
画像サイズを適切に調整することで、Webサイトの読み込み速度を向上させることができます。
より詳細な情報を知りたい場合は、以下のキーワードで検索してみてください。
- React 画像最適化
- React publicフォルダ
Reactでローカル画像を参照する代替方法
Reactでローカル画像を参照する方法として、これまでにご紹介した以外にもいくつかの方法があります。それぞれの方法にはメリット・デメリットがあるため、プロジェクトの状況に合わせて最適な方法を選択することが重要です。
CSS Modulesを利用する
CSS Modulesは、CSSのスコープを制限し、スタイルの衝突を防ぐための仕組みです。画像のパスをCSS Modulesで定義することで、JavaScriptのコードからスタイルを分離し、メンテナンス性を向上させることができます。
// MyComponent.module.css
.myImage {
background-image: url('./images/my-image.jpg');
background-size: cover;
}
// MyComponent.jsx
import React from 'react';
import styles from './MyComponent.module.css';
function MyComponent() {
return (
<div className={styles.m yImage} />
);
}
styled-componentsを利用する
styled-componentsは、JavaScriptでCSSを記述できるライブラリです。CSS Modulesと同様に、スタイルをJavaScriptのコードから分離できます。
import styled from 'styled-components';
const MyImage = styled.img`
width: 100%;
height: auto;
`;
function MyComponent() {
return (
<MyImage src="./images/my-image.jpg" alt="My Image" />
);
}
URLオブジェクトを利用する
URLオブジェクトを利用することで、画像のパスを動的に生成することができます。例えば、画像のサイズやフォーマットをパラメータとして渡す場合などに有効です。
import React, { useState } from 'react';
function MyComponent() {
const [size, setSize] = useState('small');
const imageUrl = new URL('./images/my-image.jpg', location.origin);
imageUrl.searchParams.append('size', size);
return (
<img src={imageUrl.toString()} alt="My Image" />
);
}
カスタムフックを利用する
カスタムフックを作成することで、画像の読み込み状態やエラー処理を共通化することができます。
import { useState, useEffect } from 'react';
function useImage(src) {
const [image, setImage] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
const img = new Image();
img.src = src;
img.onload = () => setImage(img);
img.onerror = () => setError(new Error('Image load failed'));
}, [src]);
return { image, error };
}
どの方法を選ぶべきか？
- カスタムフック
画像の読み込み状態やエラー処理を共通化したい場合、複雑な画像処理を行いたい場合に適しています。 - URLオブジェクト
画像のパスを動的に生成したい場合、画像のサイズやフォーマットをパラメータとして渡したい場合に適しています。 - styled-components
JavaScriptでCSSを記述したい場合、スタイルをコンポーネントに密結合したい場合に適しています。 - CSS Modules
スタイルをJavaScriptから分離したい場合、CSSの再利用性を高めたい場合に適しています。
reactjs
