fix: NFT item display issue

NaturalSelectionLabs · Sep 7, 2021 · 0ce9ef5 · 0ce9ef5
1 parent 01dc20c
commit 0ce9ef5
Showing 1 changed file with 38 additions and 31 deletions.
diff --git a/src/components/NFT/NFTItem.vue b/src/components/NFT/NFTItem.vue
@@ -1,39 +1,46 @@
 <template>
-    <video
-        v-if="imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov')"
+    <div
         :style="{
             width: size + 'px',
             height: size + 'px',
         }"
-        :src="imageUrl"
-        class="nft-item"
-        autoplay
-        loop
-        muted
-    />
-    <model-viewer
-        v-else-if="imageUrl?.endsWith('glb')"
-        :style="{
-            width: size + 'px',
-            height: size + 'px',
-        }"
-        :src="imageUrl"
-        class="nft-item"
-        ar
-        ar-modes="webxr scene-viewer quick-look"
-        environment-image="neutral"
-        auto-rotate
-        camera-controls
-    />
-    <img
-        v-else
-        :style="{
-            width: size + 'px',
-            height: size + 'px',
-        }"
-        :src="imageUrl"
-        class="nft-item"
-    />
+    >
+        <video
+            v-if="imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov')"
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+            autoplay
+            loop
+            muted
+        />
+        <model-viewer
+            v-else-if="imageUrl?.endsWith('glb')"
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+            ar
+            ar-modes="webxr scene-viewer quick-look"
+            environment-image="neutral"
+            auto-rotate
+            camera-controls
+        />
+        <img
+            v-else
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+        />
+    </div>
 </template>
 
 <script lang="ts">