From 562c4da25fff0286f6c3d9e949bfe2d82fc40975 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 3 Aug 2022 12:03:15 +0200
Subject: [PATCH] chore(gui-v2): implement nuxt image in attachment components

---
 packages/nc-gui-v2/components/cell/attachment/Carousel.vue | 2 +-
 packages/nc-gui-v2/components/cell/attachment/index.vue    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index ee5eb47d24..cc92d6daf5 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -86,7 +86,7 @@ onClickOutside(carouselRef, () => {
 
           <template #customPaging="props">
             <a>
-              <img
+              <nuxt-img
                 class="!block"
                 :alt="imageItems[props.i].title || `#${props.i}`"
                 :src="imageItems[props.i].url || imageItems[props.i].data"
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 245677c7e2..d629504a5c 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -100,7 +100,7 @@ onMounted(() => {
     </div>
 
     <template v-if="visibleItems.length">
-      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 py-1 scrollbar-thin-primary">
+      <div ref="sortableRef" :class="{ dragging }" class="flex flex-wrap gap-2 p-1 scrollbar-thin-primary">
         <div
           v-for="(item, i) of visibleItems"
           :id="item.url"
@@ -114,8 +114,9 @@ onMounted(() => {
               <div class="text-center w-full">{{ item.title }}</div>
             </template>
 
-            <img
+            <nuxt-img
               v-if="isImage(item.title, item.mimetype)"
+              placeholder
               width="150"
               height="150"
               :alt="item.title || `#${i}`"