Add fallback image

src/components/Card/Card.tsx

@@ -2,6 +2,7 @@
 
 import styles from "./Card.module.css";
 import Image from "next/image";
+import ImageWithFallback from "../ImageWithFallback/ImageWithFallback";
 
 type CardInterface = {
   id: string;
@@ -27,8 +28,9 @@ function Card({
   return (
     <div className={styles.wrapper}>
       {cover ? (
-        <Image
+        <ImageWithFallback
           src={cover}
+          fallbackSrc={"/tevi.png"}
           alt="Cover image of a book"
           height={102}
           width={72}

src/components/ImageWithFallback/ImageWithFallback.tsx

@@ -0,0 +1,25 @@
+"use client";
+import React, { useState } from "react";
+import Image, { ImageProps } from "next/image";
+
+interface ImageWithFallbackProps extends ImageProps {
+  fallbackSrc: string;
+}
+
+// https://stackoverflow.com/a/66953317
+const ImageWithFallback = (props: ImageWithFallbackProps) => {
+  const { src, fallbackSrc, ...rest } = props;
+  const [imgSrc, setImgSrc] = useState(src);
+
+  return (
+    <Image
+      {...rest}
+      src={imgSrc}
+      onError={() => {
+        setImgSrc(fallbackSrc);
+      }}
+    />
+  );
+};
+
+export default ImageWithFallback;

src/components/ImageWithFallback/index.js

@@ -0,0 +1,2 @@
+export * from "./ImageWithFallback";
+export { default } from "./ImageWithFallback";