images added

src/views/CollectionView/CollectionMerchCard.vue

@@ -1,12 +1,36 @@
 <script setup>
 import BoxIcon from '@/components/icons/BoxIcon.vue'
+import { useMerchImagesApi } from '@/api/merchImages.js'
+import { onMounted, ref } from 'vue'
+const { getImageUrl } = useMerchImagesApi()
 
-defineProps({
+const props = defineProps({
   merch: {
     type: Object,
     required: true,
   }
 })
+
+const fileList = ref([])
+
+onMounted(async () => {
+  try {
+    const { imgUrl } = await getImageUrl(props.merch.merch_uuid, 'thumbnail')
+    fileList.value = [
+      {
+        name: 'full.jpg',
+        url: imgUrl,
+        status: 'finished',
+      },
+    ]
+  } catch (error) {
+    fileList.value = []
+    if (!error.message?.includes('404')) {
+      console.error('Error getting image: ', error)
+    }
+  }
+})
+
 </script>
 
 <template>
@@ -16,7 +40,13 @@ defineProps({
     </template>
     <template #cover>
       <div class="cover-wrapper">
-        <BoxIcon />
+        <img
+          v-if="fileList.length > 0 && fileList[0].url"
+          :src="fileList[0].url"
+          alt="Thumbnail"
+          class="thumbnail"
+        />
+        <BoxIcon v-else />
       </div>
     </template>
   </n-card>
@@ -52,6 +82,13 @@ defineProps({
   overflow: hidden;
 }
 
+.thumbnail {
+  width: 100%;
+  height: auto;
+  max-width: 80%;
+  object-fit: contain;
+}
+
 .cover-wrapper :deep(svg) {
   width: 100%;
   height: auto;