Reactで画像を表示する

📝毎回忘れるのでメモ

Reactで画像を表示する方法を毎回忘れるので、メモ程度ですが記事を書くことにしました。参考になると嬉しいですね。

publicディレクトリに、assetsディレクトリを作成して、jpg画像を配置する。

ImageComponent.tsxを作成する。

const ImageComponent = () => {
  return (
    <div>
        <h1>Reactで画像を表示する</h1>
        <img src="public/assets/android.jpg" alt="Android" />
    </div>
  )
}

export default ImageComponent;

App.tsxで読み込んでブラウザに表示する。

import React from 'react';
import ImageComponent from './ui-component/Image';

const App: React.FC = () => {
  return (
    <div>
      <ImageComponent />
    </div>
  );
};

export default App;

こんな感じでできました。

でもこれだと自由度がない。サイズ調整も必要だな。Propsを使って外部から値を渡して、変更できるようにしましょう。画像のパス、サイズを変更できるようにします。

// img tag のプロパティを外部から受け取れるようにするPropsを定義
type ImageComponentProps = {
    src: string;
    alt: string;
    width: number;
    height: number;
}
// typeを使用して、外部から変更可能にする
const ImageComponent = (props: ImageComponentProps) => {
  return (
    <div>
        <img src={props.src} alt={props.alt} width={props.width} height={props.height} />
    </div>
  )
}

export default ImageComponent;

別の画像を表示したいので、iPhoneの画像の追加をしておきましょう。

App.tsxを修正して、ホットリロードすると画像の設定を変更できるコンポーネントが使えるようになっているはずです。

import React from 'react';
import ImageComponent from './ui-component/Image';

const App: React.FC = () => {
  return (
    <div>
        <h1>Reactで画像を表示する</h1>
        <ImageComponent src="public/assets/android.jpg" alt="Google" width={272} height={92} />
        <ImageComponent src="public/assets/iphone.jpg" alt="Google" width={272} height={92} />
    </div>
  );
};

export default App;

まとめ

今回は、画像を表示するコンポーネント作成を通じで、Reactで画像を表示する方法について学びました。気づいたことは、ReactのPropsを使うときに、typeを使うとデータ型を指定できることでしたね。他の言語だと、クラスや構造体で書くのですが、React.jsだとtypeでデータ型を定義して、Propsでコンポーネントに渡す関数ベースの書き方ですね。