NextJS Image에서 fallback 활용하기

NextJS@10 버전에서 나온 Image태그는 만족스러운 성능을 제공해 주지만 아쉬운 경우도 있습니다.

만약 내가 설정한 이미지가 존재하지 않을 때 대체 이미지를 보여주는 방법을 제공하지 않는다는 것이다.

 

나는 아래와 같은 방법을 활용하여 이미지가 존재하지 않을 때 이미지를 설정해 주었다.

import React, { useState } from 'react';
import Image from 'next/image';

const ImageFallback = (props) => {
  const { src, fallbackSrc, ...others } = props;
  const [imgSrc, setImgSrc] = useState(false);
  const [oldSrc, setOldSrc] = useState(src);
  if (oldSrc !== src) {
    setImgSrc(false);
    setOldSrc(src);
  }
  return (
    <Image
      {...others}
      src={imgSrc ? fallbackSrc : src}
      onError={() => {
        setImgSrc(true);
      }}
    />
  );
};

export default ImageFallback;

이미지의 props들은 모두 확장을 통해 가지고 온 뒤 Image태그의 onError속성을 활용하여 변경해 주는 방법을 사용했다.