From eeee947dbcd55f20638dc7b89cb3c8c5e958bb90 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Oct 2023 11:56:59 +0300
Subject: [PATCH] Update image demos

---
 doc/image/BasicDoc.vue    |  8 ++++----
 doc/image/PreviewDoc.vue  |  2 +-
 doc/image/TemplateDoc.vue | 32 ++++++++++++++++++--------------
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/doc/image/BasicDoc.vue b/doc/image/BasicDoc.vue
index e6b20c94a..dcf057d1e 100644
--- a/doc/image/BasicDoc.vue
+++ b/doc/image/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>Image is used similar to the standard <i>img</i> element.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,19 +14,19 @@ export default {
         return {
             code: {
                 basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
+<Image src="/image.jpg" alt="Image" width="250" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>
 </template>
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria7.jpg" alt="Image" width="250" />
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
     </div>
 </template>`
             }
diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index 1440385e0..9602fd927 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -15,7 +15,7 @@ export default {
         return {
             code: {
                 basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
+<Image src="/image.jpg" alt="Image" width="250" preview />
 `,
                 options: `
 <template>
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index aa1d1311c..a513cb502 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -1,17 +1,20 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>An eye icon is displayed by default when the image is hovered in preview mode. Use the <i>indicator</i> slot for custom content.</p>
+        <p>
+            An eye icon is displayed by default when the image is hovered in preview mode, use the <i>indicatoricon</i> slot for custom content. In addition, the <i>image</i> and <i>preview</i> slots are available to define the thumbnail and detailed
+            image respectively.
+        </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
             <template #indicatoricon>
-                <i class="pi pi-check"></i>
+                <i class="pi pi-search"></i>
             </template>
             <template #image>
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
             </template>
             <template #preview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
             </template>
         </Image>
     </div>
@@ -26,13 +29,13 @@ export default {
                 basic: `
 <Image alt="Image" preview>
     <template #indicatoricon>
-        <i class="pi pi-check"></i>
+        <i class="pi pi-search"></i>
     </template>
     <template #image>
-        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+        <img src="/thumbnail.jpg" alt="image" />
     </template>
     <template #preview="slotProps">
-        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+        <img src="/image.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
     </template>
 </Image>
 `,
@@ -41,13 +44,13 @@ export default {
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
             <template #indicatoricon>
-                <i class="pi pi-check"></i>
+                <i class="pi pi-search"></i>
             </template>
             <template #image>
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
             </template>
             <template #preview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
             </template>
         </Image>
     </div>
@@ -58,17 +61,18 @@ export default {
     <div class="card flex justify-content-center">
         <Image alt="Image" preview>
             <template #indicatoricon>
-                <i class="pi pi-check"></i>
+                <i class="pi pi-search"></i>
             </template>
             <template #image>
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.jpg" alt="image" />
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="image" width="250" />
             </template>
             <template #preview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria11.jpg" alt="preview" :style="slotProps.style" @click="slotProps.onClick" />
             </template>
         </Image>
     </div>
-</template>`
+</template>
+`
             }
         };
     }