фикс фоток в ленте

src/views/SwipeView.vue

@@ -21,20 +21,21 @@
       <div class="col-md-6 col-lg-4">
         <div class="card shadow-sm user-card">
           
-          <!-- === ОТОБРАЖЕНИЕ ФОТО (КАРУСЕЛЬ) === -->
+          <!-- === ОТОБРАЖЕНИЕ ФОТО === -->
-          <div v-if="currentUserToSwipe.photos && currentUserToSwipe.photos.length > 0" 
+          <!-- Option 1: Carousel if photos array exists and is not empty -->
-               :id="`carouselUserPhotos-${currentUserToSwipe._id}`" 
+          <div v-if="currentUserToSwipe.photos && currentUserToSwipe.photos.length > 0"
+               :id="`carouselUserPhotos-${currentUserToSwipe._id}`"
                class="carousel slide"
-               data-bs-ride="false"> 
+               data-bs-ride="false">
             <div class="carousel-inner">
-              <div v-for="(photo, index) in currentUserToSwipe.photos" 
+              <div v-for="(photo, index) in currentUserToSwipe.photos"
-                   :key="photo.public_id || photo._id" 
+                   :key="photo.public_id || photo._id"
-                   class="carousel-item" 
+                   class="carousel-item"
                    :class="{ active: photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) }">
-                <img :src="photo.url" 
+                <img :src="photo.url"
-                     class="d-block w-100 user-photo" 
+                     class="d-block w-100 user-photo"
                      :alt="'Фото ' + currentUserToSwipe.name + ' ' + (index + 1)"
-                     @error="onImageError($event, currentUserToSwipe, photo)"> <!-- MODIFIED: pass photo object -->
+                     @error="onImageError($event, currentUserToSwipe, photo)">
               </div>
             </div>
             <button v-if="currentUserToSwipe.photos.length > 1" class="carousel-control-prev" type="button" :data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`" data-bs-slide="prev">
@@ -46,17 +47,24 @@
               <span class="visually-hidden">Next</span>
             </button>
              <div class="carousel-indicators" v-if="currentUserToSwipe.photos.length > 1">
-              <button v-for="(photo, index) in currentUserToSwipe.photos" 
+              <button v-for="(photo, index) in currentUserToSwipe.photos"
-                      :key="`indicator-${photo._id}`" 
+                      :key="`indicator-${photo._id}`"
-                      type="button" 
+                      type="button"
-                      :data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`" 
+                      :data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`"
-                      :data-bs-slide-to="index" 
+                      :data-bs-slide-to="index"
-                      :class="{ active: photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) }" 
+                      :class="{ active: photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) }"
-                      :aria-current="photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) ? 'true' : 'false'" 
+                      :aria-current="photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) ? 'true' : 'false'"
                       :aria-label="`Slide ${index + 1}`"></button>
             </div>
           </div>
-          <!-- Заглушка, если фото не загрузилось ИЛИ если mainPhotoUrl нет -->
+          <!-- Option 2: Single image if mainPhotoUrl exists (and photos array was not suitable) -->
+          <div v-else-if="currentUserToSwipe.mainPhotoUrl" class="single-photo-display">
+            <img :src="currentUserToSwipe.mainPhotoUrl"
+                 class="d-block w-100 user-photo single-main-photo-img"
+                 :alt="'Фото ' + currentUserToSwipe.name"
+                 @error="onImageError($event, currentUserToSwipe, { url: currentUserToSwipe.mainPhotoUrl, _id: 'main_photo_fallback', isProfilePhoto: true })">
+          </div>
+          <!-- Option 3: Placeholder if no photos and no mainPhotoUrl -->
           <div v-else class="no-photo-placeholder d-flex align-items-center justify-content-center">
             <i class="bi bi-person-fill"></i>
           </div>
@@ -230,6 +238,7 @@ const onImageError = (event, userOnError, photoWithError) => { // MODIFIED: sign
       user: userOnError.name,
       photo_id: photoWithError._id,
       photo_url: photoWithError.url,
+      isProfilePhoto: photoWithError.isProfilePhoto,
       event_target_attributes: {
         naturalWidth: event.target.naturalWidth,
         naturalHeight: event.target.naturalHeight,
@@ -240,7 +249,7 @@ const onImageError = (event, userOnError, photoWithError) => { // MODIFIED: sign
   );
   // For debugging, let's NOT hide the image for now.
   // This will show the browser's default broken image icon.
-  // event.target.style.display = 'none'; // MODIFIED: Commented out for debugging
+  // event.target.style.display = 'none'; 
 
   // The logic to update userInSuggestions.mainPhotoUrl is outdated.
   // const userInSuggestions = suggestions.value.find(u => u._id === userOnError._id);
@@ -331,6 +340,21 @@ const onImageError = (event, userOnError, photoWithError) => { // MODIFIED: sign
   height: 400px; /* Задает фиксированную высоту для всех фотографий в карусели */
 }
 
+.single-photo-display { /* Контейнер для одиночного фото */
+  width: 100%;
+  height: 400px; /* Та же высота, что и у карусели/заглушки */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden; /* На случай если изображение попытается выйти за рамки */
+}
+
+.single-main-photo-img { /* Стиль для одиночного изображения, если оно не в карусели */
+  height: 400px; /* Явно задаем высоту */
+  /* object-fit: cover; уже есть в .user-photo */
+  /* width: 100%; уже есть в .user-photo */
+}
+
 .no-photo-placeholder { /* Стиль для заглушки, когда фотографий нет */
   height: 400px; /* Такая же высота, как и у фотографий в карусели */
   width: 100%;   /* Заглушка должна занимать всю ширину карточки */