use object

web/components/ImageFallback.tsx

@@ -1,43 +1,38 @@
 "use client";
-
-import { useEffect, useState } from "react";
-
 type Props = {
   url?: string;
   fallback: React.ReactElement;
   width: string;
   height: string;
-  alt: string;
 };
 
 // https://medium.com/@abhishekmicosoft/handling-img-fallback-307653b2f30
-export function ImageFallback({ width, height, url, fallback, alt }: Props) {
-  const [ok, setOK] = useState<boolean>(true);
-  useEffect(() => {
-    url;
-    setOK(true);
-  }, [url]);
+export function ImageFallback({ width, height, url }: Props) {
   const URL = url?.startsWith("/")
     ? `${process.env.NEXT_PUBLIC_API_ENDPOINT}${url}`
     : url;
 
-  return ok ? (
-    <img
-      src={URL}
+  return (
+    <object
+      data={URL}
+      type="image/webp"
+      width={width} // there probably prevent style shaking
+      height={height}
       style={{
         width,
         height,
         objectFit: "cover",
         borderRadius: "50%",
         pointerEvents: "none",
       }}
-      onError={() => {
-        console.log("failed to fetch image data of:", URL);
-        setOK(false);
-      }}
-      alt={alt}
-    />
-  ) : (
-    <>{fallback}</>
+    >
+      <img
+        src="/avatar.svg"
+        width={width}
+        height={height}
+        style={{ width, height }}
+        alt=""
+      />
+    </object>
   );
 }

web/components/human/WithFallback.tsx

@@ -18,7 +18,6 @@ export function AvatarWithFallback({ width, height, url }: Props) {
           sx={{ width: `${width}`, height: `${height}`, objectFit: "cover" }}
         />
       }
-      alt=""
     />
   );
 }