get image update

src/views/CollectionView/CollectionMerchCard.vue

@@ -15,22 +15,29 @@ const fileList = ref([])
 
 onMounted(async () => {
   try {
-    const imgUrl = await getImageUrl(props.merch.merch_uuid, 'thumbnail')
+    const imgUrl = getImageUrl(props.merch.merch_uuid, 'thumbnail')
+
+    await new Promise((resolve, reject) => {
+      const img = new Image()
+      img.src = imgUrl
+      img.onload = () => resolve(imgUrl)
+      img.onerror = () => reject(new Error('Image not found'))
+    })
+
     fileList.value = [
       {
-        name: 'full.jpg',
+        name: 'thumbnail.jpg',
         url: imgUrl,
         status: 'finished',
       },
     ]
   } catch (error) {
     fileList.value = []
-    if (!error.message?.includes('404')) {
+    if (!error.message.includes('404')) {
-      console.error('Error getting image: ', error)
+      console.error('Error getting thumbnail: ', error)
     }
   }
 })
-
 </script>
 
 <template>

src/views/DetailsView/DetailsViewImages.vue

@@ -77,21 +77,29 @@ async function handleUpload({ fileList: newFileList }) {
 
 onMounted(async () => {
   try {
-    const imgUrl = await getImageUrl(props.merchUuid, 'full')
+    const imgUrl = getImageUrl(props.merchUuid, 'full');
+
+    await new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = imgUrl;
+      img.onload = () => resolve(imgUrl);
+      img.onerror = () => reject(new Error('Image not found'));
+    });
+
     fileList.value = [
       {
         name: 'full.jpg',
         url: imgUrl,
         status: 'finished',
       },
-    ]
+    ];
   } catch (error) {
-    fileList.value = []
+    fileList.value = [];
-    if (!error.message?.includes('404')) {
+    if (!error.message.includes('404')) {
-      console.error('Error getting image: ', error)
+      console.error('Error getting image: ', error);
     }
   }
-})
+});
 
 const showConfirmDelete = ref(false)
 
@@ -207,7 +215,8 @@ const cancelDelete = () => {
 
 .preview-container {
   display: block;
-  width: 100%;
+  width: 50%;
+  min-width: 250px;
   max-width: 400px;
   margin: 0 auto;
 }