feat: 默认卡图

src/ui/Shared/YgoCard/index.tsx

 import classNames from "classnames";
-import { CSSProperties, useMemo } from "react";
+import { CSSProperties, useMemo, useEffect, useState } from "react";
 
 import { useConfig } from "@/config";
 import { isSuperReleaseCard } from "@/superPreRelease";
@@ -21,33 +21,39 @@ export const YgoCard: React.FC<Props> = (props) => {
   const {
     className,
     code = 0,
-    // cardName,
     isBack = false,
     width,
     style,
     onClick,
     onLoad,
   } = props;
-  return useMemo(
-    () => (
-      <div
-        className={classNames(styles["ygo-card"], className)}
-        style={
-          {
-            width,
-            "--src": `url(${getCardImgUrl(code, isBack)})`,
-            ...style,
-          } as any
-        }
-        onClick={onClick}
-        // 加载完成
-        onLoad={onLoad}
-      >
-        {/* 暂时不能这么写...但如果用onload的话来判断可能又很消耗性能，再看看吧 */}
-        {/* {cardName} */}
-      </div>
-    ),
-    [code],
+
+  const defaultCardSrc = "https://img2.imgtp.com/2024/03/06/G6wTJRz9.png";
+  const [src, setSrc] = useState(defaultCardSrc);
+
+  useEffect(() => {
+    setSrc(defaultCardSrc); // 以后应该是一个获取默认卡面的方法
+    const img = new Image();
+    img.onload = () => {
+      setSrc(img.src); // 图片加载完成后更新src状态
+    };
+    // 直接设置图片路径，无需url()包裹
+    img.src = getCardImgUrl(code, isBack);
+  }, [code, isBack]); // useEffect的依赖数组中加入isBack
+
+  return (
+    <div
+      className={classNames(styles["ygo-card"], className)}
+      style={
+        {
+          width,
+          "--src": `url(${src})`,
+          ...style,
+        } as any
+      }
+      onClick={onClick}
+      onLoad={onLoad}
+    ></div>
   );
 };