3.1.5.2 외부 이미지 사용하기

Image 컴포넌트로 프로젝트 내에 있는 이미지 외에 인터넷상 이미지도 보여줄 수 있습니다. 외부 이미지를 설정할 때는 다음과 같이 객체에 uri 값을 설정해 source Props로 설정하면 됩니다.

<Image
  source={{uri: 'https://via.placeholder.com/150'}}
  style={styles.image}
  resizeMode="contain"
/>

이 코드를 볼 때 중괄호가 두 번 겹쳐져 있어서 ‘이게 무슨 코드지?’ 하고 헷갈릴 수도 있습니다. 단순히 객체 타입의 값을 Props에 넣었을 뿐입니다. 다음 코드와 의미가 똑같습니다.

const source = {uri: 'https://via.placeholder.com/150'};   
      
return (
  <View style={styles.block}>    
    <Image
      source={source}
      style={styles.image}
      resizeMode="contain"
    />            
    <Text style={styles.description}>야호! 할일이 없습니다.</Text>
  </View>
);

▲ 그림 3-27 외부 이미지 보여주기