use object (#474)

<!--変更したい場合は、`/.github/pull_request_template.md` を修正して下さい。-->
# PRの概要

<!-- 変更の目的 もしくは 関連する Issue 番号 -->
<!-- 以下のように書くと Issue にリンクでき、マージ時に自動で Issue を閉じられる-->
<!-- closes #1 -->

## 具体的な変更内容
<!-- ビューの変更がある場合はスクショによる比較などがあるとわかりやすい -->

## 影響範囲
<!-- この関数を変更したのでこの機能にも影響がある、など -->

## 動作要件
<!-- 動作に必要な 環境変数 / 依存関係 / DBの更新 など -->

## 補足
<!-- レビューをする際に見てほしい点、ローカル環境で試す際の注意点、など -->

## レビューリクエストを出す前にチェック！

- [ ] 改めてセルフレビューしたか
- [ ] 手動での動作検証を行ったか
- [ ] server の機能追加ならば、テストを書いたか
  - 理由: 書いた | server の機能追加ではない
- [ ] 間違った使い方が存在するならば、それのドキュメントをコメントで書いたか
  - 理由: 書いた | 間違った使い方は存在しない
- [ ] わかりやすいPRになっているか

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->

Author: aster-void

web/bun.lockb

@@ -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/ImageFallback.tsx

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