スマホ画面で、画像がダウンロードされている問題を解決 (#641)

# PRの概要

## 具体的な変更内容

## 影響範囲

## 動作要件

## 補足

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

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

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

Author: KaichiManabe

web/components/ImageFallback.tsx

@@ -13,26 +13,15 @@ export function ImageFallback({ width, height, url }: Props) {
     : 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",
+    <img
+      src={URL}
+      onError={(e) => {
+        (e.target as HTMLImageElement).src = "/avatar.svg";
       }}
-    >
-      <img
-        src="/avatar.svg"
-        width={width}
-        height={height}
-        style={{ width, height }}
-        alt=""
-      />
-    </object>
+      width={width}
+      height={height}
+      style={{ width, height, borderRadius: "50%" }}
+      alt=""
+    />
   );
 }