Как обработать битые картинки?

// Обработка на чистом JS
const img = new Image();
img.src = 'image.jpg';
img.onerror = function() {
  this.src = '/fallback.jpg';
  this.alt = 'Изображение не найдено';
};

const ImageWithFallback = ({ src, alt, fallback }) => {
  const [error, setError] = useState(false);

  const handleError = () => {
    setError(true);
  };

  return (
    <img
      src={error ? fallback : src}
      alt={alt}
      onError={handleError}
    />
  );
};

// Использование
<ImageWithFallback 
  src="/possible-broken-image.jpg"
  fallback="/default-image.jpg"
  alt="Описание"
/>

const useImageLoader = (src) => {
  const [status, setStatus] = useState('loading');

  useEffect(() => {
    const img = new Image();
    img.src = src;
    
    img.onload = () => setStatus('loaded');
    img.onerror = () => setStatus('error');

    return () => {
      img.onload = null;
      img.onerror = null;
    };
  }, [src]);

  return status;
};

// Использование в компоненте
const ImageComponent = ({ src }) => {
  const status = useImageLoader(src);

  if (status === 'loading') {
    return <div className="image-placeholder">Загрузка...</div>;
  }

  if (status === 'error') {
    return <img src="/fallback.jpg" alt="Запасное изображение" />;
  }

  return <img src={src} alt="Основное изображение" />;
};

const RobustImage = ({ src, alt, fallbacks = [] }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const sources = [src, ...fallbacks];

  const handleError = () => {
    if (currentIndex < sources.length - 1) {
      setCurrentIndex(currentIndex + 1);
    }
  };

  return (
    <img
      src={sources[currentIndex]}
      alt={alt}
      onError={handleError}
    />
  );
};

// Использование с несколькими запасными вариантами
<RobustImage
  src="/primary-image.jpg"
  fallbacks={[
    '/secondary-image.jpg',
    '/tertiary-image.png',
    '/final-fallback.jpg'
  ]}
  alt="Очень надежное изображение"
/>

.image-container {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #f0f0f0;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-container img:error {
  display: none;
}

.image-container:has(img:error)::after {
  content: 'Изображение не доступно';
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
}

// Предзагрузка критических изображений
const preloadImages = (urls) => {
  urls.forEach(url => {
    const img = new Image();
    img.src = url;
  });
};

// Использование
useEffect(() => {
  preloadImages([
    '/critical-image1.jpg',
    '/critical-image2.jpg',
    '/fallback-image.jpg'
  ]);
}, []);