image onerror

이미지를 불러오지 못하였을 때 대체 이미지를 사용할 수 있다

import Image from "next/image";
import { useState } from "react";

export default function ImagePage() {
  const [src, setSrc] = useState("/not-exist.png");
  return (
    <>
      <h1>image onerror</h1>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src="/not-exist.png"
        alt="placeholder"
        onError={(e) => {
          // @ts-ignore
          e.target.src = "/assets/images/placeholder.png";
        }}
      />
      {/* use Next Image */}
      <h1>Next Image</h1>
      <Image
        src={src}
        alt="placeholder"
        width={150}
        height={150}
        onError={(e) => {
          setSrc("/assets/images/placeholder.png");
        }}
      />
    </>
  );
}

참고

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#image_loading_errors
• https://stackoverflow.com/questions/66949606/what-is-the-best-way-to-have-a-fallback-image-in-nextjs