Merge pull request #13691 from SoyDiego/13683-srcSet-attribute-Image

Image: Added srcSet and previewImageSrcSet
primefaces · Sep 26, 2023 · 6603de7 · 6603de7 · vercel · Sep 26, 2023
2 parents 2fb9869 + ab21b05
commit 6603de7
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/src/app/components/image/image.ts b/src/app/components/image/image.ts
@@ -22,7 +22,7 @@ import { FocusTrapModule } from 'primeng/focustrap';
     selector: 'p-image',
     template: `
         <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
-            <img [attr.src]="src" [attr.alt]="alt" [attr.width]="width" [attr.height]="height" [ngStyle]="imageStyle" [class]="imageClass" (error)="imageError($event)" />
+            <img [attr.src]="src" [attr.srcset]="srcSet" [attr.sizes]="sizes" [attr.alt]="alt" [attr.width]="width" [attr.height]="height" [ngStyle]="imageStyle" [class]="imageClass" (error)="imageError($event)" />
             <button type="button" class="p-image-preview-indicator" *ngIf="preview" (click)="onImageClick()" #previewButton>
                 <ng-container *ngIf="indicatorTemplate; else defaultTemplate">
                     <ng-container *ngTemplateOutlet="indicatorTemplate"></ng-container>
@@ -60,7 +60,7 @@ import { FocusTrapModule } from 'primeng/focustrap';
                     (@animation.start)="onAnimationStart($event)"
                     (@animation.done)="onAnimationEnd($event)"
                 >
-                    <img [attr.src]="previewImageSrc ? previewImageSrc : src" class="p-image-preview" [ngStyle]="imagePreviewStyle()" (click)="onPreviewImageClick()" />
+                    <img [attr.src]="previewImageSrc ? previewImageSrc : src" [attr.srcset]="previewImageSrcSet" [attr.sizes]="previewImageSizes" class="p-image-preview" [ngStyle]="imagePreviewStyle()" (click)="onPreviewImageClick()" />
                 </div>
             </div>
         </span>
@@ -100,15 +100,35 @@ export class Image implements AfterContentInit {
      */
     @Input() style: { [klass: string]: any } | null | undefined;
     /**
-     * Attribute of the image element.
+     * The source path for the main image.
      * @group Props
      */
     @Input() src: string | SafeUrl | undefined;
     /**
-     * Attribute of the image element.
+     * The srcset definition for the main image.
+     * @group Props
+     */
+    @Input() srcSet: string | SafeUrl | undefined;
+    /**
+     * The sizes definition for the main image.
+     * @group Props
+     */
+    @Input() sizes: string | undefined;
+    /**
+     * The source path for the preview image.
      * @group Props
      */
     @Input() previewImageSrc: string | SafeUrl | undefined;
+    /**
+     * The srcset definition for the preview image.
+     * @group Props
+     */
+    @Input() previewImageSrcSet: string | SafeUrl | undefined;
+    /**
+     * The sizes definition for the preview image.
+     * @group Props
+     */
+    @Input() previewImageSizes: string | undefined;
     /**
      * Attribute of the preview image element.
      * @group Props

diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
@@ -11625,14 +11625,14 @@
                             "optional": false,
                             "readonly": false,
                             "type": "string | SafeUrl",
-                            "description": "Attribute of the image element."
+                            "description": "The source path for the main image."
                         },
                         {
                             "name": "previewImageSrc",
                             "optional": false,
                             "readonly": false,
                             "type": "string | SafeUrl",
-                            "description": "Attribute of the image element."
+                            "description": "The source path for the preview image."
                         },
                         {
                             "name": "alt",
@@ -24482,6 +24482,13 @@
                             "type": "string",
                             "description": "Custom style class for paginator"
                         },
+                        {
+                            "name": "paginatorStyleClass",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "description": "Custom style class for paginator"
+                        },
                         {
                             "name": "paginatorDropdownAppendTo",
                             "optional": false,