fix(common): set bound width and height onto host element (#47082)

kara · Pawel Kozlowski · commit d71dfe931f71 · 2022-08-16T17:36:54.000Z
This commit fixes a bug in NgOptimizedImage where if you bound the width or height attribute (e.g. `[width]=width`), the attribute would only be reflected as "ng-reflect-x". The actual "width" or "height" attribute would not be set on the host element. This is a problem because the exact named attribute must be set on the element for the browser to detect it and use it to reserve space for the image (and thus prevent CLS). PR Close #47082
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -267,6 +267,11 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
                 observer.registerImage(this.getRewrittenSrc(), this.rawSrc));
       }
     }
+    // Must set width/height explicitly in case they are bound (in which case they will
+    // only be reflected and not found by the browser)
+    this.setHostAttribute('width', this.width!.toString());
+    this.setHostAttribute('height', this.height!.toString());
+
     this.setHostAttribute('loading', this.getLoadingBehavior());
     this.setHostAttribute('fetchpriority', this.getFetchPriority());
     // The `src` and `srcset` attributes should be set last since other attributes
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -68,6 +68,19 @@ describe('Image directive', () => {
     expect(_fetchpriorityAttrId).toBeLessThan(_srcAttrId);  // was set after `src`
   });
 
+  it('should always reflect the width/height attributes if bound', () => {
+    setupTestingModule();
+
+    const template = '<img rawSrc="path/img.png" [width]="width" [height]="height">';
+    const fixture = createTestComponent(template);
+    fixture.detectChanges();
+
+    const nativeElement = fixture.nativeElement as HTMLElement;
+    const img = nativeElement.querySelector('img')!;
+    expect(img.getAttribute('width')).toBe('100');
+    expect(img.getAttribute('height')).toBe('50');
+  });
+
   describe('setup error handling', () => {
     it('should throw if both `src` and `rawSrc` are present', () => {
       setupTestingModule();

Original file line number	Diff line number	Diff line change
`@@ -267,6 +267,11 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {`
`267`	`267`	`observer.registerImage(this.getRewrittenSrc(), this.rawSrc));`
`268`	`268`	`}`
`269`	`269`	`}`
	`270`	`+ // Must set width/height explicitly in case they are bound (in which case they will`
	`271`	`+ // only be reflected and not found by the browser)`
	`272`	`+ this.setHostAttribute('width', this.width!.toString());`
	`273`	`+ this.setHostAttribute('height', this.height!.toString());`
	`274`	`+`
`270`	`275`	`this.setHostAttribute('loading', this.getLoadingBehavior());`
`271`	`276`	`this.setHostAttribute('fetchpriority', this.getFetchPriority());`
`272`	`277`	// The `src` and `srcset` attributes should be set last since other attributes