diff --git a/doc/image/PreviewDoc.vue b/doc/image/PreviewDoc.vue
index 5d58eaf3a..51575a899 100644
--- a/doc/image/PreviewDoc.vue
+++ b/doc/image/PreviewDoc.vue
@@ -3,11 +3,7 @@
         <p>Enabling <i>preview</i> mode displays a modal layer when the image is clicked to provide transformation options such as rotating and zooming.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview>
-            <template #imagePreview="slotProps">
-                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" :style="slotProps.imagePreviewStyle" @click="slotProps.previewImageClick" />
-            </template>
-        </Image>
+        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
     </div>
 
     <DocSectionCode :code="code" />
diff --git a/doc/image/TemplateDoc.vue b/doc/image/TemplateDoc.vue
index 8fcaa8fb8..cca7a2631 100644
--- a/doc/image/TemplateDoc.vue
+++ b/doc/image/TemplateDoc.vue
@@ -3,10 +3,16 @@
         <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>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+        <Image alt="Image" preview>
             <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.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" />
+            </template>
         </Image>
     </div>
     <DocSectionCode :code="code" />
@@ -18,28 +24,46 @@ export default {
         return {
             code: {
                 basic: `
-<Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+<Image alt="Image" preview>
     <template #indicatoricon>
         <i class="pi pi-check"></i>
     </template>
+    <template #image>
+        <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.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" />
+    </template>
 </Image>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+        <Image alt="Image" preview>
             <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.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" />
+            </template>
         </Image>
     </div>
 </template>`,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria12.jpg" alt="Image" width="250" preview>
+        <Image alt="Image" preview>
             <template #indicatoricon>
                 <i class="pi pi-check"></i>
             </template>
+            <template #image>
+                <img src="https://primefaces.org/cdn/primevue/images/galleria/galleria12s.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" />
+            </template>
         </Image>
     </div>
 </template>`