fix style attr passed as object not rendered properly for image field

Sitecore · Oct 8, 2024 · 14a1102 · 14a1102
1 parent 50eb0f6
commit 14a1102
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/sitecore-jss-angular/src/components/image.directive.spec.ts b/packages/sitecore-jss-angular/src/components/image.directive.spec.ts
@@ -190,6 +190,7 @@ describe('<img *scImage />', () => {
         alt: 'my image',
         height: '650',
         width: '300',
+        style: { background: 'white', color: 'black' },
       },
     };
     const eeMedia = {
@@ -224,6 +225,15 @@ describe('<img *scImage />', () => {
       expect(img.width).toBe(150);
     });
 
+    it('should render img with style prop', () => {
+      comp2.field = media;
+      fixture2.detectChanges();
+
+      const img = de.nativeElement.getElementsByTagName('img')[0];
+      expect(img.style.getPropertyValue('background')).toBe('white');
+      expect(img.style.getPropertyValue('color')).toBe('black');
+    });
+
     it('should render img with addtional props in EE mode', () => {
       comp2.field = eeMedia;
       fixture2.detectChanges();

diff --git a/packages/sitecore-jss-angular/src/components/image.directive.ts b/packages/sitecore-jss-angular/src/components/image.directive.ts
@@ -124,7 +124,7 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges {
       ...parsedAttrs,
     };
     // eslint-disable-next-line prefer-const
-    let { src, srcSet, ...otherAttrs } = combinedAttrs;
+    let { src, srcSet, style, ...otherAttrs } = combinedAttrs;
     if (!src) {
       return null;
     }
@@ -139,6 +139,13 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges {
     } else {
       newAttrs.src = src;
     }
+
+    if (style) {
+      newAttrs.style = Object.entries(style)
+        .map(([propName, value]) => `${propName}:${value}`)
+        .join(';');
+    }
+
     return newAttrs;
   }