💄 调整图片样式

src/components/post/tp-image.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="tp-image-box" @click="showOverlay = true">
+    <div :style="{ width: getWidth }">
       <img
         :style="getImageStyle()"
         :src="localUrl"
@@ -7,10 +8,11 @@
         :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;
 }