tsx에 이미지 추가할 때 오류 해결 방법 [TypeScript]

상황

js 에서 tsx 확장자 명을 바꾸고 나니

아래의 메시지와 함께 빨간불이 떳습니다.

TS2307: Cannot find module '../assets/icons/flag-pink.png' or its corresponding type declarations.

해결 방법으로는 크게 두 가지 방법이 있습니다.

첫 번째 방법

const flagPinkImg = ***require***('../assets/icons/flag-pink.png')
로 바꾸는 것입니다.

바꾸고 나면 에러메시지는 안 뜨지만

TS80005: 'require' call may be converted to an import.

라는 메시지를 보게 되어서 찝찝합니다.

두 번째 방법

1. tsconfig.json 중괄호 안에 "typeRoots": ["types"] 를 추가합니다. “types”에는 원하는 폴더명을 적으시면 됩니다.

2. 위에 적은 폴더 안에 images.d.ts 라는 파일을 만듭니다. 아래 내용을 복사해서 넣습니다.

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

3. 그러면 원래 코드에서 빨간불이 사라지는 걸 확인하실 수 있습니다.
   

참고

https://anerim.tistory.com/214
https://egas.tistory.com/125