[React Native] image 불러오기

HTML에서 image 파일을 불러오기 위한 코드는 다음과 같다.

<Img src="URL">

src 는 source 로 어디에 위치하고 있는 이미지를 불러올 것인지를 정해주는 것이다.

리액트 네이티브에서 이미지 컴포넌트의 주소를 정해주는 방법은 다음과 같이 source 뒤에 속성 값으로 적어주는 방법이다.

<Image source={URL} />

이때 URL에 들어갈 수 있는 값은 2가지로 다음과 같다.

1. {uri : '이미지 주소'} 로 외부 주소를 통해 가져오기.
2. require('로컬경로') 를 통해 로컬에 저장되어 있는 이미지를 불러오기.

uri

먼저, uri를 사용하는 방법은 다음과 같이 작성한다.
uri를 사용하는 방법은 외부 주소의 이미지를 가져올 때 자주 사용함.

<Image source={{uri : "URL"}} />

주의할 점은 source={uri : "URL"} 이 아니라 source={{uri : "URL"}} 인 점.

const imgSrc = {uri : "URL"} 

<Image source={imgSrc}>

위의 코드 처럼 분리해서 생각하면 쉽다.

require

다음은 require 사용하는 방법이다.
require를 사용하는 방법은 로컬에 저장되어 있는 이미지를 불러올 때 자주 사용함.

<Image source={require("로컬 주소")} />

참고링크

https://reactnative.dev/docs/images#local-filesystem-images

https://yuddomack.tistory.com/entry/5React-Native-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%94%94%EC%9E%90%EC%9D%B8-4%EB%B6%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-UI-%EB%A7%88%EB%AC%B4%EB%A6%AC