From 14a1102cd87e35300b9219b66f07a11a7f4cf3d7 Mon Sep 17 00:00:00 2001
From: yavorsk <yavor.krastev@sitecore.com>
Date: Tue, 8 Oct 2024 11:31:51 +0300
Subject: [PATCH] fix style attr passed as object not rendered properly for
 image field

---
 .../src/components/image.directive.spec.ts             | 10 ++++++++++
 .../src/components/image.directive.ts                  |  9 ++++++++-
 2 files changed, 18 insertions(+), 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
index 4ff50438b5..1a119cf080 100644
--- 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
index 085e274060..0820e85020 100644
--- 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;
   }