From e95f380ff79ef72cf3d062f4ca996c3465619f49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9B=AE=E6=A3=83?= <BT-Muli@outlook.com>
Date: Sun, 18 Aug 2024 12:00:14 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E8=B0=83=E6=95=B4=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/post/tp-image.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/post/tp-image.vue b/src/components/post/tp-image.vue
index 082173d8..171d8c70 100644
--- a/src/components/post/tp-image.vue
+++ b/src/components/post/tp-image.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="tp-image-box" @click="showOverlay = true">
-    <img
-      :style="getImageStyle()"
-      :src="localUrl"
-      :alt="props.data.insert.image"
-      :title="getImageTitle()"
-    />
+    <div :style="{ width: getWidth }">
+      <img
+        :style="getImageStyle()"
+        :src="localUrl"
+        :alt="props.data.insert.image"
+        :title="getImageTitle()"
+      />
+    </div>
   </div>
   <TpoImage :image="props.data" v-model="showOverlay" />
 </template>
 <script lang="ts" setup>
-import { StyleValue, ref, onMounted, onUnmounted } from "vue";
+import { StyleValue, ref, onMounted, onUnmounted, computed } from "vue";
 
 import { saveImgLocal } from "../../utils/TGShare.js";
 import { bytesToSize } from "../../utils/toolFunc.js";
@@ -45,6 +47,11 @@ onMounted(async () => {
   localUrl.value = await saveImgLocal(link);
 });
 
+const getWidth = computed(() => {
+  if (props.data.attributes == undefined) return "auto";
+  return `${props.data.attributes.width}px`;
+});
+
 onUnmounted(() => {
   if (localUrl.value) URL.revokeObjectURL(localUrl.value);
 });
@@ -84,6 +91,9 @@ function getImageUrl(): string {
 </script>
 <style lang="css" scoped>
 .tp-image-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin: 10px auto;
 }