[ReactNative] Image Url 렌더링

21.07.2024

1. 기존 코드

처음 mockData를 만들었을 때의 코드는 로컬 패스와 uri를 구분하지 않았다.

const mockData = {
  { src: 'https://image-on-the-internet.url'},
  { src: '../local/image/path'},
}

// ...

<Image source={{ uri: src }} />

 

2. 해결 코드

현재의 mockData와 Image 안의 코드는 이렇게 수정되었다.

const mockData = {
  { src: 'https://image-on-the-internet.url'},
  { src: null },
}

// ...

import DefaultImg from '../local/image/path.png';

// ...

<Image source={item.src ? { uri: item.src } : DefaultImg} />

3. 원리

uri는 인터넷의 소스를 가져올 때 사용하는 프로퍼티이기 때문에 네트워크를 통해 별도의 번들링 없이도 이미지를 가져올 수 있다.

그러나 로컬 이미지는 번들링 과정에서 포함이 되어야 하고 그걸 가능하게 해주는게 require 또는 import 키워드이다.

그렇기때문에 uri에는 로컬패스를 쓸 수 없고, 그저 스트링 타입의 로컬패스도 source에 넣었을 때 사용 불가능한 것이다.

로컬이미지를 사용하고싶다면 반드시 import문으로 가져와야 한다.