fix(common): Add data attribtue to NgOptimizedImage (#48497)

Add a tracking attribute in oder to be able to distinguish usages of NgOptimizedImage from standard images PR Close #48497
angular · Jan 4, 2023 · 2f4f063 · 2f4f063
1 parent aa51e9b
commit 2f4f063
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
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
@@ -417,6 +417,11 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
 
     this.setHostAttribute('loading', this.getLoadingBehavior());
     this.setHostAttribute('fetchpriority', this.getFetchPriority());
+
+    // The `data-ng-img` attribute flags an image as using the directive, to allow
+    // for analysis of the directive's performance.
+    this.setHostAttribute('ng-img', 'true');
+
     // The `src` and `srcset` attributes should be set last since other attributes
     // could affect the image's loading behavior.
     const rewrittenSrc = this.getRewrittenSrc();

diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -807,6 +807,29 @@ describe('Image directive', () => {
     });
   });
 
+  describe('meta data', () => {
+    it('should add a data attribute to the element for identification', () => {
+      setupTestingModule();
+      const template = '<img ngSrc="a.png" width="100" height="50">';
+
+      const fixture = createTestComponent(template);
+      fixture.detectChanges();
+      const nativeElement = fixture.nativeElement as HTMLElement;
+      const img = nativeElement.querySelector('img')!;
+      expect(img.getAttribute('ng-img')).not.toBeNull();
+    });
+    it('should add a data attribute to the element for identification, when ngSrc bound', () => {
+      setupTestingModule();
+      const template = `<img [ngSrc]="'a.png'" width="100" height="50">`;
+
+      const fixture = createTestComponent(template);
+      fixture.detectChanges();
+      const nativeElement = fixture.nativeElement as HTMLElement;
+      const img = nativeElement.querySelector('img')!;
+      expect(img.getAttribute('ng-img')).not.toBeNull();
+    });
+  });
+
   describe('fill mode', () => {
     it('should allow unsized images in fill mode', () => {
       setupTestingModule();