img 태그 에러 대응하기 (이미지를 불러올 수 없을 때)

언틸 서비스 초기에는 회원가입시 프로필 이미지를 oauth에서 제공하는 url을 그대로 저장해 사용했었다. (지금은 따로 s3에 저장하고 있습니다. 🥲)

때문에 해당 주소가 유효하지 않게 되면 아래와 같이 엑박이 발생했다.

이런 문제를 해결하기 위해서는 img 태그의 onError를 적절히 사용해주면 된다.

상황에 따라 아예 display:none 을 걸어주거나, 대체 이미지를 보여줄 수도 있다. 언틸에서는 기본 아바타를 보여주는 방식으로 대응했다. 아래는 예시이다.

const Avatar = forwardRef<HTMLDivElement, Props>(
  (
    { type = 'user', size, src, loading = false, ...props },
    ref,
  ) => {
    const [isError, setIsError] = useState(false)

    if (loading)
      return (
        <Skeleton />
      )

    if (!src || isError) {
      return (
        <div
          ref={ref}
          css={[wrapperStyle, sizeStyle]}
          className={className}
          onClick={onClick}
          {...props}
        >
          <CgUserlane />
        </div>
      )
    }

    return (
      <div
        ref={ref}
        css={[wrapperStyle, sizeStyle]}
        {...props}
      >
        <Image src={src} fill alt="avatar" onError={() => setIsError(true)} />
      </div>
    )
  },
)

export default Avatar