NetsPro/Reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Professional 2025-05-22 00:12:57 +07:00
parent e458c8e137
commit bc7f101f55
1 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/SwipeView.vue
View File

@ -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"
:id="`carouselUserPhotos-${currentUserToSwipe._id}`"
<!-- === ОТОБРАЖЕНИЕ ФОТО === -->
<!-- Option 1: Carousel if photos array exists and is not empty -->
<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"
:key="photo.public_id || photo._id"
class="carousel-item"
<div v-for="(photo, index) in currentUserToSwipe.photos"
:key="photo.public_id || photo._id"
class="carousel-item"
:class="{ active: photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) }">
<img :src="photo.url"
class="d-block w-100 user-photo"
<img :src="photo.url"
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"
:key="`indicator-${photo._id}`"
type="button"
:data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`"
:data-bs-slide-to="index"
: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'"
<button v-for="(photo, index) in currentUserToSwipe.photos"
:key="`indicator-${photo._id}`"
type="button"
:data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`"
:data-bs-slide-to="index"
: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-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%; /* Заглушка должна занимать всю ширину карточки */