Cannot find module '@src/images/avatar.png' or its corresponding type declarations.

이미지를 추가하려던 도중에 에러가 발생했다.
webpack 설정이 잘못되었나 해서, webpack.config.ts 안에 기타 파일들을 번들링 하는 file-loader, url-loader 를 추가적으로 설정해주었더니 에러가 해결되었다.

이미지에 대한 type 선언도 추가적으로 해주었다.

Error

해결 방법

npm i -D file-loader url-loader

webpack.config.ts

{
  module: {
    rules: [{
      ... // 바벨로더와 css 로더들
    }, {
      test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url-loader',
      options: {
        name: '[hash].[ext]',
        limit: 10000,
      },
    }],
  }
}

images.d.ts

declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.svg';

웹팩 설정과 type 선언을 해주었다. 이제 사진이 정상적으로 잘 나온다.