React Native에서 이미지 import로 불러오기

ESlint에서 global-require 속성을 끈다면

<Image source={require(./path/any.jpg)} />

형식으로 불러올 수 있지만 개인적으로 이미지만을 위한 require는 코드를 볼 때도 별로 라는 생각이 많이 든다.

 

나와 같은 생각을 가진 사람들은 선언 파일 하나로 이미지를 import 할 수 있다.

// import-image.d.ts
declare module '*.jpg';

*.jpg 형식의 모듈이 이미 선언되었다고 파일을 생성하는 것이다.

png, webp등의 형식도 위와 비슷하게 제작하면 된다.

import Any from './path/any.jpg';

<Image source={Any} />

 

이제 TS에러가 사라지는 것을 볼 수 있다.