서버사이드 렌더링 프로젝트 Img 에러 처리

이미지 에러 핸들링

const handleImgError = (e) => {
	e.target.src = defaultImg;
}

<img
  src={`/images/${image_code}.png`}
  alt=""
  onError={handleImgError}
  style={{
   width: '30px',
   height: '30px',
   marginRight: '5px',
   ObjectFit: 'contain',
  }}
/>

이미지 src 링크가 이미지를 가져오지 못하면 엑박 표시가 나타난다.

이 때 img 태그안에 onError 이벤트 핸들러를 통해 대체 이미지를 넣어 줄 수 있다.

또는 useRef를 활용하여 current.style을 display='none'을 주어 처리 할 수도 있다.

문제 발생

그리하여... Next.js에서 그렇게 적용하였는데 처음 페이지를 진입할 때는 제대로 onError 이벤트처리가 적용되었다.

그런데 next를 활용한 서버사이드 렌더링이 일어날 때 적용이 안되는 문제가 발생하였다.

해결 방안을 찾아본 결과 Dom이 그려지기 전에 이미지를 먼저 호출하는 과정에서 에러가 발생하는데 여기서 event를 잃어버리는 듯 했다.. (명확한 원인은 모르겠다ㅜ)

해결 방안

이미지 컴포넌트를 생성하여 setState를 통해 이미지 컴포넌트가 한번 더 렌더링하게 하여 onError 이벤트를 처리할 수 있도록 하였다.

이미지 컴포넌트

import React, { useState, useEffect } from 'react'

const NoImage = ({ src = '', alt = '', noImage, style }) => {
  const [imageSrc, setImageSrc] = useState('')
  const onError = () => {
    setImageSrc(noImage)
  }

  useEffect(() => {
    setImageSrc(src)
  }, [])

  return (
    <img
      src={imageSrc}
      onError={onError}
      alt={alt}
      style={{
        ...style,
      }}
    />
  )
}

export default NoImage

활용 컴포넌트

<NoImage
  src={`/images/${image_code}.png`}
  alt=""
  noImage="/images/default.png"
  style={{
   width: '30px',
   height: '30px',
   marginRight: '5px',
   ObjectFit: 'contain',
  }}
/>

Dom이 렌더링이 된 후 props로 전달받은 url을 연결하여 dom이 렌더링 된 후 url이 연결되게 하여 onError 이벤트의 타켓을 작동하게 한다.