Reactで画像を挿入する際に躓いたところ

Reactでポートフォリオを作成する際に少し時間がかかってしまったので試したことを備忘録としてまとめる

どんなエラーが出るか

まず画像を使用するための設定をしないときに出たエラーは下記

試したこと

・画像のパスを確認

・画像ファイルを配置しているフォルダがsrc配下にあるか確認

・ブラウザのキャッシュをクリア

・TypeScriptに画像ファイルの型を教える

エラーの情報的には4つ目のものが原因だったようで、対応したところ画像がうまく読み込めるようになった。

1.プロジェクトのルートにsrc/custom.d.tsというファイルを作成
2.次のように記述

declare module '*.jpg' {
  const value: string;
  export default value;
}
declare module '*.png' {
  const value: string;
  export default value;
}

3.webpack.config.tsにfile-loaderの設定を追加

npm install file-loader --save-dev

4.Webpackの設定にfile-loaderを追加

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]', // 出力されるファイル名を指定
            },
          },
        ],
      },
    ],
  },
};

以上で再度ビルドしたところ、うまく読み込めるようになりました。