Next에서 fallback 이미지 처리하기

어느 날 갑자기 S3에서 날라오는 이미지가 에러가 나기 시작했다.

네트워크 탭을 봐서 URL을 보니까 하나같이 S3에서 날아오는 놈들이 죄다 Not Found가 떠버린다.

 

 

그래서 fallback 처리하기로 했다. 기본 fallback 이미지는 alt 문자열이랑 같이나와서 정말 못생겼기 때문이다.

 

 

fallback 이미지를 대체해주는 자체적인 attribute가 없기 때문에 Custom Components로 FallbackImage라는 컴포넌트를 만들었다. 그리고 그 안에서 받은 이미지가 onError를 뱉어낼때, props.src를 fallback 이미지가 저장된 path로 바꿔주는 그런 간단한 로직이다. 

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

interface IProps {
  src: string;
  alt: string;
}

export const FallbackImage: NextPage<IProps> = (props) => {
  const [imgSrc, setImgSrc] = useState(props.src);

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

  return (
    <Image
      {...props}
      width="80px"
      height="80px"
      src={imgSrc ? imgSrc : '/images/fallback.png'}
      onError={() => {
        setImgSrc('/images/fallback.png');
      }}
    />
  );
};

 

하지만 변경했음에도 불구하고 에러가 나왔다. 

 

 

https://nextjs.org/docs/messages/next-image-unconfigured-host

next-image-unconfigured-host | Next.js

 

이미지 도메인을 next.config.js에 등록을 하면 에러가 고쳐질 수 도 있다는 내용이였다.

외부에서 이미지 가져올때 도메인을 등록을 해줘야 잘 가져와진다는 거였는데, 

 

  images: {
    domains: ['incourse-commerce-prod-bucket.s3.ap-northeast-2.amazonaws.com'],
  },

 

어째서인지 안가져와졌다. S3에서 날라오는 이미지들이 문제있는 모양인데, 구글링을 해보았다. 

 

 

https://github.com/vercel/next.js/issues/23523

Signed images from S3 no longer working with next/image · Issue #23523 · vercel/next.js

 

이미 나같이 문제 겪었던 사람이 있었던 모양이였다. 

 

음 그런가요? 

 

 

 

네 그랬네요.

 

이상으로 fallback 처리 완 !