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

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

@@ -0,0 +1,5 @@
+<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>

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

@@ -82,19 +82,21 @@ const attachments: ComputedRef<Attachment[]> = computed(() => {
     :hoverable="false"
   >
     <div class="flex flex-row items-center justify-start w-full">
-      <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24">
+      <div class="flex h-24 w-24 min-w-24 max-w-24">
-        <template #customPaging> </template>
+        <a-carousel v-if="attachment && attachments && attachments.length" autoplay class="!w-24 !h-24 !min-w-24 !max-w-24">
-        <template v-for="(attachmentObj, index) in attachments">
+          <template #customPaging> </template>
-          <LazyCellAttachmentImage
+          <template v-for="(attachmentObj, index) in attachments">
-            v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
+            <LazyCellAttachmentImage
-            :key="`carousel-${attachmentObj.title}-${index}`"
+              v-if="isImage(attachmentObj.title, attachmentObj.mimetype ?? attachmentObj.type)"
-            class="!h-24 !w-24 object-cover !rounded-l-xl"
+              :key="`carousel-${attachmentObj.title}-${index}`"
-            :srcs="getPossibleAttachmentSrc(attachmentObj)"
+              class="!h-24 !w-24 object-cover !rounded-l-xl"
-          />
+              :srcs="getPossibleAttachmentSrc(attachmentObj)"
-        </template>
+            />
-      </a-carousel>
+          </template>
-      <div v-else-if="attachment" class="h-24 w-24 w-full !flex flex-row items-center !rounded-l-xl justify-center">
+        </a-carousel>
-        <img class="object-contain h-24 w-24" src="~assets/icons/FileIconImageBox.png" />
+        <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>
       </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">

packages/nc-gui/utils/iconUtils.ts

@@ -89,6 +89,7 @@ import BelongsToSolidIcon from '~icons/nc-icons/bt-solid'
 import Record from '~icons/nc-icons/record'
 import Project from '~icons/nc-icons/project'
 import LookupIcon from '~icons/nc-icons/lookup'
+import FileImageIcon from '~icons/nc-icons/file-image'
 
 // Roles
 import SuperAdmin from '~icons/nc-icons/super-admin'
@@ -450,6 +451,7 @@ export const iconMap = {
   role_super: SuperAdmin,
   role_no_access: NoAccess,
   commentHere: NcCommentHere,
+  fileImage: FileImageIcon,
 }
 
 export const getMdiIcon = (type: string): any => {