From 49a9060212a4167b95c4a81730abd6646fa3d9f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Mon, 2 Sep 2024 13:45:49 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E4=BC=98=E5=8C=96=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E5=8A=A0=E8=BD=BD=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tp-image.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/post/tp-image.vue b/src/components/post/tp-image.vue
index 01b517a9..7ceff4c1 100644
--- a/src/components/post/tp-image.vue
+++ b/src/components/post/tp-image.vue
@@ -1,7 +1,11 @@
 <template>
-  <div class="tp-image-box" @click="showOverlay = true">
+  <div class="tp-image-box" @click="showOverlay = true" v-if="localUrl !== undefined">
     <img :src="localUrl" :alt="props.data.insert.image" :title="getImageTitle()" />
   </div>
+  <div v-else class="tp-image-load" :title="getImageUrl()">
+    <v-progress-circular indeterminate color="primary" size="small" />
+    <span>加载中...</span>
+  </div>
   <TpoImage :image="props.data" v-model="showOverlay" />
 </template>
 <script lang="ts" setup>
@@ -31,7 +35,7 @@ interface TpImageProps {
 
 const props = defineProps<TpImageProps>();
 const showOverlay = ref(false);
-const localUrl = ref<string>();
+const localUrl = ref<string | undefined>(undefined);
 
 console.log("tp-image", props.data.insert.image, props.data.attributes);
 
@@ -80,4 +84,12 @@ function getImageUrl(): string {
   border-radius: 10px;
   cursor: pointer;
 }
+
+.tp-image-load {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto;
+  column-gap: 5px;
+}
 </style>