[React Native] 이미지경로가 에러일때, 알림띄우기 (<Image />)

📍 태그: import { Image } from 'react-native'

<Image> 태그 컴포넌트 정보: https://reactnative.dev/docs/image#onlayout

Image · React Native

---

📍 에러상황

이미지가 없는 경우, 이미지 경로를 찾아가도 이미지를 못 찾는 경우에 alert 알림 기능 작업을 하려고 한다.

이미지 경로에 이미지가 있으면 화면에 사진이 나오는데,

이미지가 없으면 그냥 하얀화면이 나온다.

 

▼ 예시 코드

  <Image
    source={{
      uri: imageUrl,
	  // 변수 imageUrl에 이미지 경로룰 입력하였다.		
    }}
    resizeMode="contain"
    style={{ width: wp('100%'), height: hp('32%') }}
  />

---

📍 해결방법

▼ 리액트네이티브 공식사이트에서 제공하는 <Image>의 onError 속성 정보

---

onError 속성을 아래와 같이 추가해주었다.

▼ 예시 코드

onError={({ nativeEvent: { error } }) => console.warn(error)}

위의 예시코드는 <Imge>의 디폴트 값이다.

 

이 코드가 있던 없던, 경로에 이미지가 없다면 콘솔창에 아래와 같이 에러 메세지가 뜬다.

▼ console. warn(error)

WARN	Could not find image file:///Users/. . . . .

---

▼ 예시 코드 (onError속성 삽입)

▼ 예시 코드 (onError속성에 적용한 alert 알림기능)

▼ onError 속성적용된 사진

이미지 경로에 사진이 없을경우, 위와 같이 알림창이 떴다.

---

개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D