Fixed #3864 - Image: New image and preview slots

api-generator/components/image.js

@@ -54,7 +54,11 @@ const ImageSlots = [
         description: 'Custom content for the component close.'
     },
     {
-        name: 'imagePreview',
+        name: 'image',
+        description: 'Custom content for the component image.'
+    },
+    {
+        name: 'preview',
         description: 'Custom content for the component preview.'
     }
 ];

components/lib/image/Image.d.ts

@@ -62,10 +62,40 @@ export interface ImageSlots {
      * Custom close template.
      */
     close(): VNode[];
+    /**
+     * Custom image template.
+     */
+    image(scope: {
+        /**
+         * Style class of the image element.
+         */
+        class: any;
+        /**
+         * Style of the image element.
+         */
+        style: any;
+        /**
+         * Image error function.
+         */
+        onError: void;
+    }): VNode[];
     /**
      * Custom preview template.
      */
-     imagePreview(): VNode[];
+    preview(scope: {
+        /**
+         * Style class of the preview image element.
+         */
+        class: any;
+        /**
+         * Style of the preview image element.
+         */
+        style: any;
+        /**
+         * Preview click function.
+         */
+        onClick: void;
+    }): VNode[];
 }
 
 export interface ImageEmits {}

components/lib/image/Image.vue

@@ -1,6 +1,8 @@
 <template>
     <span :class="containerClass" :style="style">
+        <slot name="image" :class="imageClass" :style="imageStyle" :onError="onError">
             <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
+        </slot>
         <button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="previewButtonProps">
             <slot name="indicatoricon">
                 <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
@@ -41,7 +43,7 @@
                 </div>
                 <transition name="p-image-preview" @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" @before-leave="onBeforeLeave" @after-leave="onAfterLeave">
                     <div v-if="previewVisible">
-                        <slot name="imagePreview" :previewImageClick="onPreviewImageClick" :imagePreviewStyle="imagePreviewStyle">
+                        <slot name="preview" class="p-image-preview" :style="imagePreviewStyle" :onClick="onPreviewImageClick">
                             <img :src="$attrs.src" class="p-image-preview" :style="imagePreviewStyle" @click="onPreviewImageClick" />
                         </slot>
                     </div>
@@ -158,6 +160,7 @@ export default {
         rotateRight() {
             this.rotate += 90;
             this.previewClick = true;
+            console.log('kdnwjknkj');
         },
         rotateLeft() {
             this.rotate -= 90;