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

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 angular#47082

Author: kara

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

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