From a361aadd2da5b3193700d63a99249ba4851ac5f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 6 Feb 2023 19:14:52 +0300
Subject: [PATCH] Galleria image fix

---
 pages/galleria/Advanced.vue     |  4 ++--
 pages/galleria/AutoPlay.vue     |  4 ++--
 pages/galleria/Caption.vue      |  4 ++--
 pages/galleria/FullScreen.vue   | 14 +++++++-------
 pages/galleria/Indicator.vue    | 14 +++++++-------
 pages/galleria/Navigator.vue    | 16 ++++++++--------
 pages/galleria/Programmatic.vue |  4 ++--
 pages/galleria/Responsive.vue   |  4 ++--
 pages/galleria/Thumbnail.vue    | 16 ++++++++--------
 pages/galleria/index.vue        |  4 ++--
 10 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/pages/galleria/Advanced.vue b/pages/galleria/Advanced.vue
index 368449eec..b99c761bb 100644
--- a/pages/galleria/Advanced.vue
+++ b/pages/galleria/Advanced.vue
@@ -24,11 +24,11 @@
                     :transitionInterval="3000"
                 >
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
                     </template>
                     <template #thumbnail="slotProps">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                         </div>
                     </template>
                     <template #footer>
diff --git a/pages/galleria/AutoPlay.vue b/pages/galleria/AutoPlay.vue
index 1813f41d6..59003ff8a 100755
--- a/pages/galleria/AutoPlay.vue
+++ b/pages/galleria/AutoPlay.vue
@@ -11,10 +11,10 @@
             <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
diff --git a/pages/galleria/Caption.vue b/pages/galleria/Caption.vue
index dc8bb8566..e912bca08 100755
--- a/pages/galleria/Caption.vue
+++ b/pages/galleria/Caption.vue
@@ -11,11 +11,11 @@
             <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                     <template #item="{ item }">
-                        <img :src="$config.public.contextPath + item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
+                        <img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="{ item }">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="$config.public.contextPath + item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
+                            <img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block" />
                         </div>
                     </template>
                     <template #caption="{ item }">
diff --git a/pages/galleria/FullScreen.vue b/pages/galleria/FullScreen.vue
index 16e521562..f0bac54e4 100755
--- a/pages/galleria/FullScreen.vue
+++ b/pages/galleria/FullScreen.vue
@@ -12,10 +12,10 @@
                 <h5>With Thumbnails</h5>
                 <Galleria v-model:visible="displayBasic" :value="images" :responsiveOptions="responsiveOptions2" :numVisible="9" containerStyle="max-width: 50%" :circular="true" :fullScreen="true" :showItemNavigators="true">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
 
@@ -26,10 +26,10 @@
                 <h5>Without Thumbnails</h5>
                 <Galleria v-model:visible="displayBasic2" :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" containerStyle="max-width: 850px" :circular="true" :fullScreen="true" :showItemNavigators="true" :showThumbnails="false">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
 
@@ -51,16 +51,16 @@
                     :showThumbnails="false"
                 >
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
 
                 <div v-if="images" class="grid" style="max-width: 400px">
                     <div v-for="(image, index) of images" :key="index" class="col-3">
-                        <img :src="$config.public.contextPath + image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
+                        <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)" />
                     </div>
                 </div>
             </div>
diff --git a/pages/galleria/Indicator.vue b/pages/galleria/Indicator.vue
index f91a495e7..e9ee8cee9 100755
--- a/pages/galleria/Indicator.vue
+++ b/pages/galleria/Indicator.vue
@@ -12,7 +12,7 @@
                 <h5>Indicators with Click Event</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -21,7 +21,7 @@
                 <h5>Indicators with Hover Event</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -30,7 +30,7 @@
                 <h5>Inside Content</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -49,7 +49,7 @@
                     indicatorsPosition="top"
                 >
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -68,7 +68,7 @@
                     indicatorsPosition="left"
                 >
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -87,7 +87,7 @@
                     indicatorsPosition="right"
                 >
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -107,7 +107,7 @@
                     indicatorsPosition="left"
                 >
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #indicator="{ index }">
                         <span class="indicator-text">
diff --git a/pages/galleria/Navigator.vue b/pages/galleria/Navigator.vue
index 21901be1c..56da906e8 100755
--- a/pages/galleria/Navigator.vue
+++ b/pages/galleria/Navigator.vue
@@ -12,10 +12,10 @@
                 <h5>Item Navigators and Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -24,10 +24,10 @@
                 <h5>Item Navigators without Thumbnails</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -36,10 +36,10 @@
                 <h5>Item Navigators on Hover</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
@@ -58,10 +58,10 @@
                     :showIndicators="true"
                 >
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
diff --git a/pages/galleria/Programmatic.vue b/pages/galleria/Programmatic.vue
index 23c194dce..af51397f9 100644
--- a/pages/galleria/Programmatic.vue
+++ b/pages/galleria/Programmatic.vue
@@ -16,10 +16,10 @@
 
                 <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
                     </template>
                 </Galleria>
             </div>
diff --git a/pages/galleria/Responsive.vue b/pages/galleria/Responsive.vue
index 3e820f212..3787307d3 100755
--- a/pages/galleria/Responsive.vue
+++ b/pages/galleria/Responsive.vue
@@ -11,10 +11,10 @@
             <div class="card">
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="7" :circular="true" style="max-width: 800px">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block" />
                     </template>
                 </Galleria>
             </div>
diff --git a/pages/galleria/Thumbnail.vue b/pages/galleria/Thumbnail.vue
index bf48e2a5c..26438d697 100755
--- a/pages/galleria/Thumbnail.vue
+++ b/pages/galleria/Thumbnail.vue
@@ -12,10 +12,10 @@
                 <h5>Positioned at Bottom</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </template>
                 </Galleria>
             </div>
@@ -24,11 +24,11 @@
                 <h5>Positioned at Left</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="left" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                         </div>
                     </template>
                 </Galleria>
@@ -38,11 +38,11 @@
                 <h5>Positioned at Right</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions2" :numVisible="4" thumbnailsPosition="right" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
                         <div class="grid grid-nogutter justify-content-center">
-                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                         </div>
                     </template>
                 </Galleria>
@@ -52,10 +52,10 @@
                 <h5>Positioned at Top</h5>
                 <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" thumbnailsPosition="top" containerStyle="max-width: 640px">
                     <template #item="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
+                        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
+                        <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                     </template>
                 </Galleria>
             </div>
diff --git a/pages/galleria/index.vue b/pages/galleria/index.vue
index fa293d34f..d5d24066a 100755
--- a/pages/galleria/index.vue
+++ b/pages/galleria/index.vue
@@ -17,10 +17,10 @@
                 <div class="card">
                     <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
                         <template #item="slotProps">
-                            <img :src="$config.public.contextPath + slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
+                            <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
                         </template>
                         <template #thumbnail="slotProps">
-                            <img :src="$config.public.contextPath + slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
+                            <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" />
                         </template>
                     </Galleria>
                 </div>