React 및 Next.js에서 대체 이미지 구성

폴백이 필요한 이유는 무엇입니까?

최근 직장에서 내가 만들고 있는 웹사이트에 많은 사용자 데이터를 이미지와 함께 표시해야 했습니다. API에서 모든 데이터를 가져오고 있었고 화면에 항목을 표시하는 문제였습니다...

단, 경우에 따라 사용자의 이미지가 더 이상 존재하지 않는 경우도 있었습니다. 따라서 내 이미지 태그에 대한 src가 있었지만 이미지가 없었고 페이지에는 내가 제공한 대체 텍스트만 표시되었습니다. 왼쪽에는 깨진 src가 있고 오른쪽에는 일반 이미지가 있습니다.



보기 흉해 보여서 소스에 문제가 있을 때마다 대체 이미지를 넣어달라는 요청을 받았습니다.

React의 폴백 이미지

React의 경우 솔루션은 일반적으로 작성하는 코드에 한 줄만 추가하면 됩니다. 한 번 보자:

import fallback from "../public/fallback-image.png";

function ImageWithFallback({ src, alt, fallBackSrc = fallback.src }) {
  return (
    <div style={{ border: "1px solid black", height: "50vh" }}>
      <img
        src={src}
        alt={alt}
        style={{ height: "100%", aspectRatio: "1 / 1", objectFit: "cover" }}
        onError={(e) => (e.currentTarget.src = fallBackSrc)}
      />
    </div>
  );
}

export default ImageWithFallback;

div 및 스타일은 설명 목적으로만 존재합니다. 이것이 우리가 이미 알고 있는 일반 이미지 태그와 다르지 않다는 것을 알 수 있습니다. 마법은 src에 문제가 있는 즉시 실행되는 onError 콜백 함수에서 발생합니다. 이런 일이 발생하면 src가 대체 이미지로 대체되고 휴식을 취할 수 있습니다. ☕

Next.js에서 최적화된 이미지가 포함된 폴백 이미지

제 경우에는 지연 로딩과 이미지 최적화를 활용하기 위해 Next.js의 이미지 태그를 사용하고 있었습니다. Next.js에서 동일한 onError 함수를 사용하려고 하면 대체 이미지가 표시되지 않습니다! 따라서 오류가 발생할 경우 구성 요소를 다시 렌더링할 수 있도록 상태 조각을 만들었습니다.

import fallback from "../public/fallback-image.png";
import Image from "next/image";
import { useState } from "react";

function OptimizedImageWithFallback({ src, alt, fallBackSrc = fallback.src }) {
  const [imageError, setImageError] = useState(false);
  return (
    <div
      style={{
        border: "1px solid black",
        position: "relative",
      }}
    >
      <Image
        src={imageError ? fallBackSrc : src }
        alt={alt}
        width={500}
        height={500}
        objectFit='cover'
        onError={() => setImageError(true)}
      />
    </div>
  );
}

export default OptimizedImageWithFallback;

외부 div는 다음 이미지 태그의 요구 사항이며 일부 스타일 지정을 위해 다시 필요합니다. 이 경우 onError 함수는 오류 상태를 true로 변경하여 다시 렌더링하고 src를 fallBackSrc로 변경합니다.

그게 다야! 도움이 되었기를 바랍니다. 다음에 만나요😀