use object tag instead of manually writing error handler

Author: aster-void

web/src/components/ImageFallback.tsx

@@ -5,11 +5,10 @@ type Props = {
   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) {
+export function ImageFallback({ width, height, url, fallback }: Props) {
   const [ok, setOK] = useState<boolean>(true);
   useEffect(() => {
     url;
@@ -20,21 +19,27 @@ export function ImageFallback({ width, height, url, fallback, alt }: Props) {
     : url;
 
   return ok ? (
-    <img
-      src={URL}
+    <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}
-    />
+    >
+      <img
+        src="/avatar-fallback.webp"
+        width={width}
+        height={height}
+        style={{ width, height }}
+        alt=""
+      />
+    </object>
   ) : (
     <>{fallback}</>
   );

web/src/components/human/WithFallback.tsx

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