From 412b1cedd8f670202173efdac00f0cf574f4a928 Mon Sep 17 00:00:00 2001
From: Yuki Kobayashi <137767097+aster-void@users.noreply.github.com>
Date: Mon, 11 Nov 2024 23:31:03 +0900
Subject: [PATCH] use object (#474)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

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

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

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

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

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

<!-- レビューリクエスト後は、Slackでもメンションしてお願いすることを推奨します。 -->
---
 web/bun.lockb                         | Bin 158550 -> 158550 bytes
 web/components/ImageFallback.tsx      |  37 +++++++++++---------------
 web/components/human/WithFallback.tsx |   1 -
 web/public/avatar.svg                 |   6 +++++
 4 files changed, 22 insertions(+), 22 deletions(-)
 create mode 100755 web/public/avatar.svg

diff --git a/web/bun.lockb b/web/bun.lockb
index 120c913dc4d3cf5bc1451b16e7e8c6d1bbc666cc..d5338f3e146ed596e48fa53dfe1b0874ba9c6f2a 100755
GIT binary patch
delta 25
hcmcb1jq}<y&W0_F>5JJJ<4pC8^$fP>EoOXi8~}~Q3VZ+n

delta 25
dcmcb1jq}<y&W0_F>5JK!7{FkA-eSfV#{q!M2`c~q

diff --git a/web/components/ImageFallback.tsx b/web/components/ImageFallback.tsx
index f31e65f4..9e449b9e 100644
--- a/web/components/ImageFallback.tsx
+++ b/web/components/ImageFallback.tsx
@@ -1,29 +1,23 @@
 "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,
@@ -31,13 +25,14 @@ export function ImageFallback({ width, height, url, fallback, alt }: Props) {
         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>
   );
 }
diff --git a/web/components/human/WithFallback.tsx b/web/components/human/WithFallback.tsx
index 2e2f92a9..f9d3981e 100644
--- a/web/components/human/WithFallback.tsx
+++ b/web/components/human/WithFallback.tsx
@@ -18,7 +18,6 @@ export function AvatarWithFallback({ width, height, url }: Props) {
           sx={{ width: `${width}`, height: `${height}`, objectFit: "cover" }}
         />
       }
-      alt=""
     />
   );
 }
diff --git a/web/public/avatar.svg b/web/public/avatar.svg
new file mode 100755
index 00000000..ac3aa6fe
--- /dev/null
+++ b/web/public/avatar.svg
@@ -0,0 +1,6 @@
+<!--
+Source: https://www.veryicon.com/icons/miscellaneous/cust-background-icon/default-avatar-3.html
+Author: zuozuozuozuo
+License: Free for personal and commercial purpose.
+-->
+<svg class="svg-icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 0C229.236338 0 0 229.236338 0 512s229.236338 512 512 512 512-229.224912 512-512S794.775088 0 512 0z m-6.443844 190.801776c94.681097 0 171.710173 75.886551 171.710173 169.185192s-77.029076 169.208042-171.710173 169.208042-171.698748-75.909401-171.698749-169.185191S410.886484 190.801776 505.556156 190.801776zM793.141276 771.638944c0 61.536429-100.473702 61.536429-216.817084 61.536429H447.664383c-121.107714 0-216.794234 0-216.794234-61.536429v-12.670609c0-117.680137 97.240354-213.48091 216.794234-213.480909h128.659809c119.553879 0 216.817084 95.777922 216.817084 213.480909z" fill="#e5e5e5" /><path d="M576.324192 545.487426H447.664383c-119.553879 0-216.794234 95.755071-216.794234 213.480909v12.670609c0 61.536429 95.68652 61.536429 216.794234 61.536429h128.659809c116.343383 0 216.817084 0 216.817084-61.536429v-12.670609c0-117.702988-97.263205-213.48091-216.817084-213.480909zM505.556156 529.19501c94.681097 0 171.710173-75.875126 171.710173-169.185191S600.237253 190.801776 505.556156 190.801776s-171.698748 75.932252-171.698749 169.208043 77.029076 169.185192 171.698749 169.185191z" fill="#ffffff" /></svg>