💄 调整图片样式

src/components/post/tp-image.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="tp-image-box" @click="showOverlay = true">
-    <img
+    <div :style="{ width: getWidth }">
-      :style="getImageStyle()"
+      <img
-      :src="localUrl"
+        :style="getImageStyle()"
-      :alt="props.data.insert.image"
+        :src="localUrl"
-      :title="getImageTitle()"
+        :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;
 }