Next/image onError처리

import Image from 'next/image'

export default function 아무개컴포넌트({something}) {
..
..
	function handleError(e){
												//=> 귀여운 곰돌이 이미지 주소
		e.currentTarget.src = 'http://t1.daumcdn.net/friends/prod/editor/dc8b3d02-a15a-4afa-a88b-989cf2a50476.jpg'
	                         
	}
..
	return ( 
		<Image src={something} onError={handleError}  ... />
	)
}

Why ?

1. SSG(static site generator)는 pre-rendering 방식으로 빌드타임때, onError 이벤트가 붙은 <Image /> 컴포넌트를 포함하여 vercel 서버에서 미리 화면을 렌더링해서 클라이언트로 전해주게 된다.

2. 이 때 src에 포함되어야 하는 이미지 경로는 외부 API 호출에 대한 응답이다.
(현재 프로젝트에서는 api를 호출하여 이미지 주소값을 받아 src 속성에 바인딩 되게 되는데, api 오류가 나면 “”를 돌려주게 되어있다)

3. 클라이언트에서 전달을 받아보니 Image src=””라는 falsy한 값을 받게 된다.

4. onErorr가 발생한다

5. (중요) 하지만 onError을 처리할 currentTarget이 없다.

currentTarget은 이벤트핸들러가 붙은 DOM을 의미한다

 

import Img from "next/image";

import { useEffect, useRef, useState } from "react";

export default function Image({ src, alt = "포스트 썸네일", ...rests }) {
  const [imgSrc, setImgSrc] = useState(src);

  function handleError() {
    const fallbackSrc =
      "http://t1.daumcdn.net/friends/prod/editor/dc8b3d02-a15a-4afa-a88b-989cf2a50476.jpg";

    setImgSrc(fallbackSrc);
  }

  useEffect(() => {
      setImgSrc(src);
  }, [src]);

  return <Img src={imgSrc} onError={handleError} {...rests} />;
}

결과

다른 해결책

무게에만 초점을 맞추면 문제를 풀 수 없습니다. 핵심을 봐야 돼요. - 우영우