【TypeScript】img画像を読み込めないエラー

画像が読み込めない

TypeScriptで構成されたWebアプリケーションを作っているのですが、画像を読み込めなくて困っていました。

試したこと

該当ファイル周辺のフォルダ構成は下記のようになっていて、

profileimage
|- ProfileImage.tsx
|- ProfileImage.module.scss
|- Rectangle81.jpg

ProfileImage.tsxとProfileImage.module.scssは、

ProfileImage.tsx

import React from "react";
import styles from "./ProfileImage.module.scss";

const ProfileImage = () => {
  return (
    <div className={styles.root}>
      <div className={styles.coverPhotoWrapper}></div>
    </div>
  );
};

export default ProfileImage;

ProfileImage.module.scss

.root {
  width: 100%;
  height: 200px;
  .coverPhotoWrapper {
    background: url(./Rectangle81.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
  }
}

このようになっていました。

エラー発生

表示具合を確かめてみようと、ブラウザをリロードするとエラーが発生しました。
ターミナルを見ていると、

/Users/USERNAME/node_modules/file-loader.js doesn't exist
        /Users/USERNAME/node_modules/file-loader doesn't exist

上記エラー（一部抜粋）を発見。

file-loaderをinstall

とりあえず上記エラーをそのままグーグル検索にかけると、

こちらのページを発見。
サイト内で書かれている通り、

$ npm install file-loader --save-dev

を実行すると、無事画像が表示されました。

まとめ

いつもはcreate-react-appからプロジェクトを始めるのですが、今回はとあるGithubレポジトリからクローンしたものからのスタートだったので、このようなエラーにつながったのかな？と思っています。

同じようなエラーに遭遇された方はぜひ試してみてください。