modified: src/views/Gallery.vue

set base url

begushiybashkir/bbvue/src/views/Gallery.vue

@@ -28,18 +28,9 @@
         <h2 class="section-title">Лучшие моменты</h2>
         <div class="slider-container">
           <div class="slider" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
-            <div 
+            <div v-for="(slide, index) in slides" :key="index" class="slide"
-              v-for="(slide, index) in slides" 
+              :class="{ 'active': currentSlide === index }">
-              :key="index"
+              <img :src="getImageUrl(slide.src)" :alt="slide.alt" class="slide-image" @load="imageLoaded(index)">
-              class="slide"
-              :class="{ 'active': currentSlide === index }"
-            >
-              <img 
-                :src="getImageUrl(slide.src)" 
-                :alt="slide.alt"
-                class="slide-image"
-                @load="imageLoaded(index)"
-              >
               <div class="slide-overlay">
                 <div class="slide-content">
                   <h3>{{ slide.title }}</h3>
@@ -60,13 +51,9 @@
 
           <!-- Индикаторы -->
           <div class="slider-indicators">
-            <button 
+            <button v-for="(slide, index) in slides" :key="index"
-              v-for="(slide, index) in slides" 
+              :class="['indicator', { 'active': currentSlide === index }]" @click="goToSlide(index)"
-              :key="index"
+              :aria-label="`Перейти к фото ${index + 1}`"></button>
-              :class="['indicator', { 'active': currentSlide === index }]"
-              @click="goToSlide(index)"
-              :aria-label="`Перейти к фото ${index + 1}`"
-            ></button>
           </div>
 
           <!-- Счетчик -->
@@ -84,31 +71,17 @@
 
         <!-- Фильтры -->
         <div class="gallery-filters">
-          <button 
+          <button v-for="filter in filters" :key="filter.value"
-            v-for="filter in filters" 
+            :class="['filter-btn', { 'active': activeFilter === filter.value }]" @click="setFilter(filter.value)">
-            :key="filter.value"
-            :class="['filter-btn', { 'active': activeFilter === filter.value }]"
-            @click="setFilter(filter.value)"
-          >
             {{ filter.label }}
           </button>
         </div>
 
         <!-- Сетка фотографий -->
         <div class="gallery-grid">
-          <div 
+          <div v-for="(image, index) in filteredImages" :key="index" class="gallery-item" @click="openLightbox(index)">
-            v-for="(image, index) in filteredImages" 
-            :key="index"
-            class="gallery-item"
-            @click="openLightbox(index)"
-          >
             <div>{{ getImageUrl(image.src) }}</div>
-            <img 
+            <img :src="getImageUrl(image.src)" :alt="image.alt" class="gallery-image" loading="lazy">
-              :src="getImageUrl(image.src)" 
-              :alt="image.alt"
-              class="gallery-image"
-              loading="lazy"
-            >
             <div class="gallery-overlay">
               <div class="overlay-content">
                 <span class="image-date">{{ image.date }}</span>
@@ -140,11 +113,7 @@
         </button>
 
         <div class="lightbox-image-container">
-          <img 
+          <img :src="getImageUrl(currentLightboxImage.src)" :alt="currentLightboxImage.alt" class="lightbox-image">
-            :src="getImageUrl(currentLightboxImage.src)" 
-            :alt="currentLightboxImage.alt"
-            class="lightbox-image"
-          >
           <div class="lightbox-info">
             <h3>{{ currentLightboxImage.title }}</h3>
             <p>{{ currentLightboxImage.description }}</p>
@@ -294,7 +263,8 @@ export default {
   methods: {
     getImageUrl(path) {
       // В продакшене замените на правильный путь
-      return `../src/assets/images/${path}`
+      const baseUrl = import.meta.env.BASE_URL
+      return baseUrl + `src/assets/images/${path}`
     },
     nextSlide() {
       this.currentSlide = (this.currentSlide + 1) % this.slides.length
@@ -344,7 +314,7 @@ export default {
     handleKeydown(event) {
       if (!this.lightboxActive) return
 
-      switch(event.key) {
+      switch (event.key) {
         case 'Escape':
           this.closeLightbox()
           break
@@ -978,6 +948,7 @@ export default {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);