React で SVG と PNG 画像を簡単に表示：静的アセットとコンポーネントの使い分け

2024-05-15

React コンポーネントで画像（SVG、PNG）をインポートする方法

静的アセットとしてインポート

この方法は、Webpack などを使用して、画像ファイルをバンドルし、JavaScript ファイルに埋め込むものです。

手順:

画像ファイルをインポート:
```
import image from './image.png';
```

JSX で画像を表示:

<img src={image} alt="画像の説明" />

コンポーネントとしてインポート

SVG 画像の場合は、コンポーネントとしてインポートすることができます。この方法は、SVG ファイルをコードとして扱い、より柔軟な制御が可能になります。

変換されたコンポーネントをインポート:
```
import MyComponent from './MyComponent.svg';
```
JSX でコンポーネントを表示:
```
<MyComponent />
```

補足:

Webpack の設定によっては、画像ファイルのインポート方法が異なる場合があります。詳細は、Webpack のドキュメントを参照してください。
パフォーマンスを考慮する場合、SVG 画像を使用することをお勧めします。SVG 画像はベクター形式なので、サイズが小さく、拡大縮小しても画質が劣化しません。

React コンポーネントで画像をインポートするサンプルコード

import React from 'react';
import image from './image.png';

function MyComponent() {
  return (
    <div>
      <img src={image} alt="画像の説明" />
    </div>
  );
}

export default MyComponent;

import React from 'react';

const MyComponent = () => (
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
);

export default MyComponent;

説明:

この例では、image.png という名前の画像ファイルを ./image.png からインポートしています。その後、img タグの src 属性にインポートされた画像ファイルを指定して、画像を表示しています。

この例では、SVG コードを直接コンポーネント内に記述しています。その後、MyComponent コンポーネントを JSX で呼び出すことで、SVG 画像を表示しています。

上記のコードはあくまで一例です。実際のコードは、プロジェクトの設定や要件によって異なる場合があります。
画像ファイルのパスは、プロジェクトの構造に合わせて適宜変更してください。
SVG 画像をコンポーネントとしてインポートする場合は、width や height などの属性を指定して、画像のサイズを調整することができます。

React コンポーネントで画像をインポートするその他の方法

require() 関数を使用する

import React from 'react';

function MyComponent() {
  const image = require('./image.png');
  return (
    <div>
      <img src={image} alt="画像の説明" />
    </div>
  );
}

export default MyComponent;

URL を使用して画像を参照する

import React from 'react';

function MyComponent() {
  return (
    <div>
      <img src="https://example.com/image.png" alt="画像の説明" />
    </div>
  );
}

export default MyComponent;

Base64 エンコードされたデータを使用する

import React from 'react';

const imageData = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00AAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C9I00...';

function MyComponent() {
  return (
    <div>
      <img src={imageData} alt="画像の説明" />
    </div>
  );
}

export default MyComponent;