import Image from 'next/image';

type GenerateNavIconProps = {
  menuName: string;
};

function NavIcon({ menuName }: GenerateNavIconProps) {
  const imagePath = `/menu/${menuName}.png`;
  const defaultImagePath = '/menu/Setting.png';

  return (
    <Image
      src={imagePath}
      alt={`${menuName} icon`}
      width={18}
      height={18}
      onError={(e) => {
        e.currentTarget.src = defaultImagePath; // 이미지 로드 실패 시 기본 이미지 사용
      }}
    />
  );
}

export default NavIcon;

onError 이벤트 핸들러가 next/image 컴포넌트에서는 작동하지 않습니다. next/image는 기본적으로 img 태그를 사용하지 않기 때문에 onError 이벤트를 직접 사용할 수 없습니다. 대신, Image 컴포넌트의 src 속성을 조건부로 설정하여 이미지가 존재하지 않을 경우 기본 이미지를 사용하도록 변경할 수 있습니다

변경후

'use client';

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

type GenerateNavIconProps = {
  menuName: string;
};

function NavIcon({ menuName }: GenerateNavIconProps) {
  const [src, setSrc] = useState(`/menu/${menuName}.png`);
  const defaultImagePath = '/menu/Setting.png';

  return (
    <Image
      src={src}
      alt={`${menuName} icon`}
      width={18}
      height={18}
      onError={() => setSrc(defaultImagePath)}
    />
  );
}

export default NavIcon;