img태그 onError 처리하기 (대체 이미지)

 

Next.js같은 경우는 Image태그를 사용하라고 권장하지만

 

react와 next.js에서 img태그를 사용할 시에 대체 이미지 처리하는 방법을 기록해둔다.

 

상단의 이미지와같이 존재하지 않는경우 대체이미지를 띄우게 할 수 있는데

 

단순 삼항연산자 조건문으로 설정해도 되겠지만 그래도 혹시나 파일이 없을 때 대체 이미지를

 

띄우는 방식을 알아두자, 특히 외부 링크로 사진을 가져올 때 필요할것 같다.

 

<img
                src={props.image}
                onError={handleImage}
                width={150}
                alt="제품이미지"
              ></img>

이와같이 사용한다고 치면

 

src = 이미지링크

alt = 이미지가 없을시 나타내줄 설명

그리고 onError 부분이 본 링크 이미지가 없을때 대체 해서 실행해주는 부분이다.

 

react와 next.js에서는 따로 함수를 만들어 사용해준다.

 

  const default_img = "ramen/default.png";
  const handleImage = (e) => {
    e.target.src = default_img;
    console.log(e.target.src);
  };

상단에 이와같이 선언해주고, onError에 넣어줘 사용해주는 방식이다.

 

외부 이미지파일 이건 내부 이미지파일이건 본 이미지 src링크가 없을시에 한번 오류가 뜨긴하지만

 

정상적으로 onError에 있는 링크를 한번더 배출해 실행한다.