React.jsでローカルフォルダから画像パスのsrcを設定する方法

2024-02-09 12:18 React.js 画像パス ローカルフォルダ

  1. まず、Reactプロジェクトのルートディレクトリに画像を配置します。例えば、"src/images"というディレクトリを作成し、その中に画像ファイルを保存します。

  2. Reactコンポーネントで画像を表示するために、画像ファイルへのパスを取得する必要があります。次のように、画像ファイルへの絶対パスを取得する方法があります。

import React from 'react';
import myImage from './images/my-image.jpg';
const MyComponent = () => {
  return (
    <div>
      <img src={myImage} alt="My Image" />
    </div>
  );
};
export default MyComponent;

上記の例では、"my-image.jpg"という画像ファイルを"src/images"ディレクトリに保存し、そのパスをimport文で取得しています。img要素のsrc属性にパスを渡して、画像を表示しています。

  1. もし、画像がネストされたコンポーネント内で使用される場合、画像ファイルへのパスは相対パスとして解釈されます。例えば、以下のような場合です。
import React from 'react';
const NestedComponent = () => {
  const imagePath = './images/my-image.jpg';
  return (
    <div>
      <img src={imagePath} alt="My Image" />
    </div>
  );
};
export default NestedComponent;

上記の例では、imagePath変数に相対パスを指定し、それをimg要素のsrc属性に渡しています。

このように、React.jsでローカルフォルダから画像パスのsrcを設定することができます。必要な画像ファイルを配置し、パスを適切に指定することで、Reactコンポーネント内で画像を表示することができます。