[React]ファイル選択した画像を表示する(TypeScript)

はじめに プロフィール画像を選択する時など、ローカルにある画像をReactで表示する際のやり方がわからなかったのでメモ 基本編: ファイル選択した画像を表示する やり方 <input type="file" />でファイルを選択する window.URL.createObjectURL()でオブジェクトURLを生成する useState()で<img src={xxx}>を更新する 実際のコード inputのonChangeでイベントを発火し、 選択されたファイルをwindow.URL.createObjectURL()に渡しています ※スタイルにはTailWind CSSを使用していますが、処理内容には影響しないため省略します import React, { useState } from 'react'; import './App.css'; function App() { //

[skuralll]

“ // useState()で画像のパスを保持 // ※デフォルトで表示する画像を初期値で指定(この例ではpublicフォルダのdefault-profile.pngを指定) const [profileImage, setProfileImage] = useState('default-profile.png'); const onFileInputChange = (e: R”