等待图片

src/App.tsx

@@ -1,7 +1,8 @@
 import "./App.css";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
+import altImg from "./assets/altImg.png"
 
-interface Qrcode {
+interface SignInType {
     qrcode?: string;
     title?: string;
     start_time?: string;
@@ -9,45 +10,57 @@ interface Qrcode {
 }
 
 function App() {
-  const [qrcode, setQrcode] = useState<Qrcode>();
+    const [signIn, setSignIn] = useState<SignInType>();
     useEffect(() => {
         fetch("http://101.35.127.74:3000/qrcode")
             .then((res) => res.json())
             .then((data) => {
-        setQrcode(() => data);
+                setSignIn(() => data);
             });
         const source = new EventSource("http://101.35.127.74:3000/qrcode-sse", {
             // withCredentials: true,
         });
         source.addEventListener("message", (ev: MessageEvent<string>) => {
-      const data = JSON.parse(ev.data) as Qrcode;
+            const data = JSON.parse(ev.data) as SignInType;
-      setQrcode(() => data);
+            setSignIn(() => data);
         });
     }, []);
     return (
         <div className={"flex flex-col items-center pt-8"}>
-      <h2 className={"font-bold text-3xl text-center"}>{qrcode?.title}</h2>
+            {signIn ? (
-      {qrcode ? (
+                signIn.qrcode && !signIn.qrcode.startsWith("http") ? (
+                    <>
+                        <h2 className={"font-bold text-3xl text-center"}>{signIn?.title}</h2>
                         <img
-          alt={"没有正在进行的会议"}
+                            alt={""}
                             className={"w-[90vw] md:w-[30vw] aspect-square"}
-          src={qrcode?.qrcode}
+                            src={signIn.qrcode}
                         />
+                        <p className={"text-lg"}>开始时间 {signIn?.start_time}</p>
+                        <p className={"text-lg"}>过期时间 {signIn?.end_time}</p>
+                    </>
+                ) : (
+                    <div
+                        className={
+                            "w-[90vw] md:w-[30vw] aspect-square flex justify-center items-center text-lg"
+                        }
+                    >
+                        <img
+                            alt={""}
+                            className={"w-[90vw] md:w-[30vw] aspect-square"}
+                            src={altImg}
+                        />
+                    </div>
+                )
             ) : (
                 <div
                     className={
                         "w-64 justify-center flex items-center text-xl font-bold aspect-square"
                     }
                 >
-          loading
+                    加载中
                 </div>
             )}
-      {qrcode?.qrcode && (
-        <>
-          <p className={"text-lg"}>开始时间 {qrcode?.start_time}</p>
-          <p className={"text-lg"}>节省时间 {qrcode?.end_time}</p>
-        </>
-      )}
         </div>
     );
 }