no image fix

src/components/wishlists/WishlistExternalView.vue

@@ -12,6 +12,7 @@ import Image from "primevue/image";
 import InputText from "primevue/inputtext";
 import FloatLabel from "primevue/floatlabel";
 import Dialog from "primevue/dialog";
+import Skeleton from "primevue/skeleton";
 
 import apiClient from "@/services/axiosSetup";
 
@@ -84,7 +85,9 @@ const fetchWishlist = async () => {
       .then((res) => {
         wishlist.value = res
         wishlist.value?.items.forEach((item: WishlistItem) => {
+          if (item.images.length > 0) {
             selectedImage.set(item.id, item.images[0])
+          }
         })
         loading.value = false
       })
@@ -146,7 +149,7 @@ onMounted(async () => {
             <div class="text-lg font-semibold">{{ wishlist.owner.firstName }}</div>
           </div>
         </div>
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 justify-between h-full">
           <div class="flex flex-row gap-4">
             <p class="text-2xl text-gray-700">Желания</p>
           </div>
@@ -155,7 +158,8 @@ onMounted(async () => {
             <div v-for="item in wishlist.items"
                  class=" bg-white flex flex-col p-4 flex-shrink-0  gap-4 shadow-md rounded-lg max-w-128 h-full">
               <div class="flex flex-col w-full justify-center gap-2">
-                <div class="flex w-full justify-center">
+                <div  v-if="item.images.length > 0 && selectedImage.get(item.id)" class="flex flex-col w-full h-full justify-between">
+                <div v-if="item.images.length > 0 && selectedImage.get(item.id)" class="flex w-full justify-center">
                   <Image
                       :src="selectedImage.get(item.id).startsWith('http') ? selectedImage.get(item.id) : apiClient.defaults.baseURL+'/'+selectedImage.get(item.id) "
                       alt="Image"
@@ -176,6 +180,13 @@ onMounted(async () => {
 
 
                 </div>
+                </div>
+                <div v-else class="min-h-[304px] flex flex-col items-center w-full justify-center gap-2 bg-gray-100 rounded-lg max-w-128 h-full">
+                  <i class="pi pi-images !text-gray-400 z-50" style="font-size: 8rem"/>
+                  <span class="text-lg font-bold text-center text-gray-400">Изображение пока не загружено</span>
+
+                </div>
+
               </div>
               <div class="flex flex-col justify-between gap-2 h-full">
                 <div class="flex flex-col gap-2">