Merge pull request #4391 from traPtitech/fix/image_component_warn

メッセージの画像のサムネイルを表示するコンポーネントが警告を出していたのを修正
traPtitech · Jan 6, 2025 · 55903f8 · 55903f8
2 parents d7dbf29 + ed73185
commit 55903f8
Showing 1 changed file with 21 additions and 19 deletions.
diff --git a/src/components/Main/MainView/MessageElement/MessageFileListImage.vue b/src/components/Main/MainView/MessageElement/MessageFileListImage.vue
@@ -1,28 +1,30 @@
 <template>
-  <template v-if="canShow">
-    <router-link v-if="isLarge" :to="fileLink" :class="$style.largeContainer">
-      <!--
+  <div>
+    <template v-if="canShow">
+      <router-link v-if="isLarge" :to="fileLink" :class="$style.largeContainer">
+        <!--
         height, widthはlayout shift対策
         https://www.mizdra.net/entry/2020/05/31/192613
       -->
-      <img
-        draggable="false"
-        :alt="name"
-        :src="fileThumbnailPath"
-        :height="fileThumbnailSize.height"
-        :width="fileThumbnailSize.width"
-      />
-      <play-icon v-if="isAnimatedImage" :class="$style.playIcon" />
-    </router-link>
-    <router-link v-else :to="fileLink" :class="$style.container">
-      <!--
+        <img
+          draggable="false"
+          :alt="name"
+          :src="fileThumbnailPath"
+          :height="fileThumbnailSize.height"
+          :width="fileThumbnailSize.width"
+        />
+        <play-icon v-if="isAnimatedImage" :class="$style.playIcon" />
+      </router-link>
+      <router-link v-else :to="fileLink" :class="$style.container">
+        <!--
         CSSで固定値指定なのでheight, widthはつけない
       -->
-      <img draggable="false" :alt="name" :src="fileThumbnailPath" />
-      <play-icon v-if="isAnimatedImage" :class="$style.playIcon" />
-    </router-link>
-  </template>
-  <div v-else :class="$style.container">表示できない画像です</div>
+        <img draggable="false" :alt="name" :src="fileThumbnailPath" />
+        <play-icon v-if="isAnimatedImage" :class="$style.playIcon" />
+      </router-link>
+    </template>
+    <div v-else :class="$style.container">表示できない画像です</div>
+  </div>
 </template>
 
 <script lang="ts" setup>