[sitecore-jss-angular] Fix style attribute from field not rendered properly in image field

CHANGELOG.md

@@ -17,6 +17,7 @@ Our versioning strategy is as follows:
 * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911))
 * `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ([#1932](https://github.com/Sitecore/jss/pull/1932))
 * `[sitecore-jss-angular]` Fix default empty field components to not render the unwanted wrapping tags ([#1937](https://github.com/Sitecore/jss/pull/1937)) ([#1940](https://github.com/Sitecore/jss/pull/1940))
+* `[sitecore-jss-angular]` Fix image field style property not rendered properly ([#1944](https://github.com/Sitecore/jss/pull/1944))
 
 ### 🎉 New Features & Improvements
 

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();

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;
   }