Reactで画像を表示する方法


Reactで画像を表示する方法をメモしておきます。
まず、使いたい画像の画像のパスを指定してimportして {モジュール名}を使ってimportした名前で呼び出します。具体的には以下のような形です。

import Icon from './images/icon.svg'
const IconComponent = () =>{
  return <img src={Icon}  alt="アイコン" />
}
export default IconComponent

SVGがうまく表示されない場合、SVGファイルをテキストエディタで開いてimg/pngになっている部分をimage/pngにすると表示されます。

atnr.net の RSS登録はこちらから

コメントは受け付けていません。