fix: Made empty image placegolder and added svg icon for it

packages/nc-gui/assets/nc-icons/file-image.svg

@@ -1,5 +1,6 @@
-<svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M44.6667 34H35.3333C34.597 34 34 34.597 34 35.3333V44.6667C34 45.403 34.597 46 35.3333 46H44.6667C45.403 46 46 45.403 46 44.6667V35.3333C46 34.597 45.403 34 44.6667 34Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M46.0002 41.9998L42.6668 38.6665L35.3335 45.9998" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M37.6665 38.6665C38.2188 38.6665 38.6665 38.2188 38.6665 37.6665C38.6665 37.1142 38.2188 36.6665 37.6665 36.6665C37.1142 36.6665 36.6665 37.1142 36.6665 37.6665C36.6665 38.2188 37.1142 38.6665 37.6665 38.6665Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="48" height="48" viewBox="0 0 48 48" fill="white" xmlns="http://www.w3.org/2000/svg">
+<rect width="48" height="48" fill="#F4F4F5"/>
+<path d="M28.6667 18H19.3333C18.597 18 18 18.597 18 19.3333V28.6667C18 29.403 18.597 30 19.3333 30H28.6667C29.403 30 30 29.403 30 28.6667V19.3333C30 18.597 29.403 18 28.6667 18Z" stroke="#9AA2AF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.0002 25.9998L26.6668 22.6665L19.3335 29.9998" stroke="#9AA2AF" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.6665 22.6665C22.2188 22.6665 22.6665 22.2188 22.6665 21.6665C22.6665 21.1142 22.2188 20.6665 21.6665 20.6665C21.1142 20.6665 20.6665 21.1142 20.6665 21.6665C20.6665 22.2188 21.1142 22.6665 21.6665 22.6665Z" stroke="#9AA2AF" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>

packages/nc-gui/components/virtual-cell/components/ListItem.vue

@@ -82,22 +82,21 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     :hoverable="false"
   >
     <div class="flex flex-row items-center justify-start w-full">
-      <div class="flex h-24 w-24 min-w-24 max-w-24">
-        <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24 !min-w-24 !max-w-24">
-          <template #customPaging> </template>
-          <template v-for="(attachmentObj, index) in attachments">
-            <LazyCellAttachmentImage
-              v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
-              :key="`carousel-${attachmentObj.title}-${index}`"
-              class="!h-24 !w-24 object-cover !rounded-l-xl"
-              :srcs="getPossibleAttachmentSrc(attachmentObj)"
-            />
-          </template>
-        </a-carousel>
-        <div v-else-if="attachment" class="h-24 w-24 w-full !flex flex-row items-center !rounded-l-xl justify-center">
-          <img class="object-contain h-24 w-24 min-w-24 max-w-24" src="~assets/icons/FileIconImageBox.png" />
-        </div>
+      <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24 !max-h-24 !max-w-24">
+        <template #customPaging> </template>
+        <template v-for="(attachmentObj, index) in attachments">
+          <LazyCellAttachmentImage
+            v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
+            :key="`carousel-${attachmentObj.title}-${index}`"
+            class="!h-24 !w-24 !max-h-24 !max-w-24 object-cover !rounded-l-xl"
+            :srcs="getPossibleAttachmentSrc(attachmentObj)"
+          />
+        </template>
+      </a-carousel>
+      <div v-else-if="attachment" class="h-24 w-24 !flex flex-row items-center !rounded-l-xl justify-center">
+        <GeneralIcon class="w-full h-full !text-6xl !leading-10 !text-transparent rounded-lg" icon="fileImage" />
       </div>
+
       <div class="flex flex-col m-[.75rem] gap-1 flex-grow justify-center overflow-hidden">
         <div class="flex justify-between xs:gap-x-2">
           <span class="font-semibold text-gray-800 nc-display-value xs:(truncate)">