gridpilot.gg/apps/website/components/shared/SafeImage.tsx

'use client';
import React, { useState } from 'react';
import { Image as UiImage } from '@/ui/Image';

interface SafeImageProps extends React.ComponentProps<typeof UiImage> {
  fallbackComponent?: React.ReactNode;
}

export function SafeImage({ fallbackComponent, ...props }: SafeImageProps) {
  const [error, setError] = useState(false);

  if (error && fallbackComponent) {
    return <>{fallbackComponent}</>;
  }

  return (
    <UiImage
      {...props}
      onError={(e) => {
        setError(true);
        props.onError?.(e);
      }}
    />
  );
}