📝
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でコンポーネントに渡す関数ベースの書き方ですね。
Discussion