• トップページ
• Blog
• Reactで画像を表示する方法

Reactで画像を表示する方法

Tweet

Reactで画像を表示する方法をメモしておきます。

Create React Appの場合

create-react-appでプロジェクトを作成している場合、使いたい画像の画像のパスを指定してimportして {モジュール名}を使ってimportした名前で呼び出します。

具体的には以下のような形です。

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

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

Webpackを設定する場合

create-react-appを使用せずwebpackでトランスパイルする場合はまずfile-loaderを追加します。

yarn add file-loader

webpack.config.jsのmoduleのrulesに以下の設定を追加します。

{
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',//
            },
          },
        ],
      }

コンポーネントへのimportの方法については先に掲載したcreate-react-appの時と同様です。

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