react native Image 로깅

이미지 태그<Image/>를 통해 이미지를 로드할때, 전달한 uri가 올바름에도 이미지가 화면에 나타나지 않을 때가 있다.

그럴때는 로깅을 추가하여 에러를 확인할 수 있다.

  <Image 
    source={{ uri: uri }} 
    className="w-full h-3/4 rounded-lg" 
    resizeMode="cover"
    onLoadStart={() => console.log(`Loading image started: ${plant.plant_name} - ${plant.signed_url}`)}
    onLoad={() => console.log(`Image loaded successfully: ${plant.plant_name} - ${plant.signed_url}`)}
    onError={(error) => console.error(`Error loading image ${plant.plant_name} - ${plant.signed_url}:`, error.nativeEvent.error)}
    />