Bind cms page

app/_components/ImageWithFallback.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import Image, { ImageProps } from "next/image";
+import { useState } from "react";
+
+interface ImageWithFallbackProps extends Omit<ImageProps, "src" | "alt"> {
+  src: string;
+  alt: string;
+  fallbackSrc?: string;
+}
+
+export default function ImageWithFallback({
+  src,
+  alt,
+  fallbackSrc = "/clipboard.svg",
+  ...props
+}: ImageWithFallbackProps) {
+  const [imgSrc, setImgSrc] = useState(src);
+
+  return (
+    <Image
+      {...props}
+      src={imgSrc}
+      alt={alt}
+      onError={() => setImgSrc(fallbackSrc)}
+    />
+  );
+}