React-Native에서 Typescript 사용시 이미지 경로 오류

영화 App을 만드는 중 포스터 이미지가 없는 이미지를 로컬에 있는 샘플이미지 파일로 대체하는 작업을 하려고 하는데 Import를 하니 오류가 생겼다.
작동도 잘하고 개발하는데 크게 지장은 없지만 빨간 에러가 내심 신경쓰여 방법을 찾아보니 절대경로 지정 방법과 상대 경로로 import해 적용하는 두가지 방법이 있었다.

나는 import해서 사용하는 방법을 택했다.
절대경로 지정은 조금 복잡하여 시간 여유가 있을때 시도 해봐야겠다.

처음엔 아래와 같은 방법을 시도해봤다.

import SampleImg from "../assets/image/sample_img.png";


const Img = styled.Image`
  width: 91px;
  height: 160px;
  border-radius: 5px;
`;

<Img source={SampleImg} />

하지만 경로 밑에 빨간 에러 줄이 없어지지 않았다.
에러 내용은 아래 내용과 같다.

'../assets/image/sample_img.png' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.

나는 바로 다른 방법을 시도해봤다.

두번째 방법은 태그에 직접 경로를 부여하는 방법이다.

const Img = styled.Image`
  width: 91px;
  height: 160px;
  border-radius: 5px;
`;


<Img source={require("../assets/image/sample_img.png")} />

에러 표시 없이 해결되었다.

참고할 사항은 이 부분은 styled-components를 적용한 방법이다.
styled-components 적용하지 않고 react-native 태그를 사용하려면
<Img>태그 대신 <Image> 태그를 사용하고 StyleSheet.create나 태그에 직접 style={{...}}을 사용하면 된다.