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