Image

Image 컴포넌트를 사용해서 비트맵 이미지(png, jpg 등)나 벡터 이미지(svg)를 로드하고 화면에 렌더링할 수 있어요. 이미지 형식에 맞게 자동으로 적절한 방식으로 렌더링돼요.

시그니처

declare function Image(props: ImageProps): import('react/jsx-runtime').JSX.Element;

파라미터

• propsobject
  

  컴포넌트에 전달되는 props 객체예요.

  • props.styleobject
    

    이미지 컴포넌트의 스타일을 설정하는 객체예요. width, height 등 레이아웃 관련 속성을 포함할 수 있어요.

  • props.sourceobject
    

    로드할 이미지 리소스에 대한 정보를 담고 있는 객체예요.

    • props.source.uristring
      

      로드할 이미지 리소스를 나타내는 URI 주소예요.

    • props.source.cache'immutable' | 'web' | 'cacheOnly' · 'immutable'
      

      이미지 캐시 전략을 설정할 수 있는 옵션이에요. 이 옵션은 비트맵 이미지에만 적용돼요. 기본값은 immutable이예요.

  • props.onLoadStart() => void
    

    이미지 로딩이 시작될 때 호출되는 콜백 함수예요.

  • props.onLoadEnd() => void
    

    이미지 로딩이 완료되었을 때 호출되는 콜백 함수예요.

  • props.onError() => void
    

    이미지 로드 중 에러가 발생했을 때 호출되는 콜백 함수예요.

예제

이미지 로드 및 렌더링 예시

다음 예시는 비트맵 및 벡터 이미지 리소스를 로드하고, 에러가 발생했을 때 console.log로 에러 메시지를 출력하는 방법을 보여줘요.

import { Image } from '@granite-js/react-native';
import { View } from 'react-native';

export function ImageExample() {
  return (
    <View>
      <Image
        source={{ uri: 'my-image-link' }}
        style={{
          width: 300,
          height: 300,
          borderWidth: 1,
        }}
        onError={() => {
          console.log('Failed to load image');
        }}
      />

      <Image
        source={{ uri: 'my-svg-link' }}
        style={{
          width: 300,
          height: 300,
          borderWidth: 1,
        }}
        onError={() => {
          console.log('Failed to load image');
        }}
      />
    </View>
  );
}