[React] 이미지 로드 실패 시, 이미지 처리 방법 (img onError)

[문제]

: 웹에서는 잘 보이는데, 안드로이드 어플에서 엑박뜸

이런식으로 보이고 대체 텍스트가 나옴

--> img onError 처리해서 이미 아예 display.non하던가 대체 이미지 넣어줘야함 

 

 

[해결법]

여기 링크의 방법을 제일 많이 참고했는데, 

제시하는 해결 방법은

1) 대체이미지를 넣거나

2) 깨지는 이미지를 숨김처리하는 방법이 있다. 

https://github.com/vercel/next.js/discussions/14772

<img> tag onError function doesn't work · vercel next.js · Discussion #14772

나의 경우에는 대체이미지를 넣기는 어색한 맥락이라 그냥 숨겨버리는것으로 처리했다. 

이미지 에러일 경우 display='none' 해주는 함수를 추가하여 image의 onError에 적용!! 

const hidingErrorImg = e => {
	e.target.onerror = null;
	e.target.style.display = 'none';
};

return (
...
	<img 
		...
		onError={hidingErrorImg}
	/>
...
)

 

 

 

출처

https://github.com/vercel/next.js/discussions/14772

https://www.designcise.com/web/tutorial/how-to-hide-a-broken-image-in-react

https://www.geeksforgeeks.org/how-to-check-and-resolve-broken-images-in-react-js/