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('', () => {
alt: 'my image',
height: '650',
width: '300',
+ style: { background: 'white', color: 'black' },
},
};
const eeMedia = {
@@ -224,6 +225,15 @@ describe('', () => {
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;
}