infoalloggi-monorepo/apps/infoalloggi/src/components/ImageWithFallback.tsx

import Image from "next/image";
import type { ComponentProps } from "react";

const fallbackImage = "/fallback-image.png";
export const ImageFlbk = (props: ComponentProps<typeof Image>) => {
	return (
		<Image
			{...props}
			onLoad={(e) => {
				if (e.currentTarget.naturalWidth === 0) {
					e.currentTarget.src = fallbackImage;
				}
			}}
			onError={(e) => {
				e.currentTarget.src = fallbackImage;
			}}
		/>
	);
};