Skip to content

Commit 2f4f063

Browse files
atcastlealxhub
authored andcommitted
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
1 parent aa51e9b commit 2f4f063

File tree

2 files changed

+28
-0
lines changed

2 files changed

+28
-0
lines changed

packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -417,6 +417,11 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
417417

418418
this.setHostAttribute('loading', this.getLoadingBehavior());
419419
this.setHostAttribute('fetchpriority', this.getFetchPriority());
420+
421+
// The `data-ng-img` attribute flags an image as using the directive, to allow
422+
// for analysis of the directive's performance.
423+
this.setHostAttribute('ng-img', 'true');
424+
420425
// The `src` and `srcset` attributes should be set last since other attributes
421426
// could affect the image's loading behavior.
422427
const rewrittenSrc = this.getRewrittenSrc();

packages/common/test/directives/ng_optimized_image_spec.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -807,6 +807,29 @@ describe('Image directive', () => {
807807
});
808808
});
809809

810+
describe('meta data', () => {
811+
it('should add a data attribute to the element for identification', () => {
812+
setupTestingModule();
813+
const template = '<img ngSrc="a.png" width="100" height="50">';
814+
815+
const fixture = createTestComponent(template);
816+
fixture.detectChanges();
817+
const nativeElement = fixture.nativeElement as HTMLElement;
818+
const img = nativeElement.querySelector('img')!;
819+
expect(img.getAttribute('ng-img')).not.toBeNull();
820+
});
821+
it('should add a data attribute to the element for identification, when ngSrc bound', () => {
822+
setupTestingModule();
823+
const template = `<img [ngSrc]="'a.png'" width="100" height="50">`;
824+
825+
const fixture = createTestComponent(template);
826+
fixture.detectChanges();
827+
const nativeElement = fixture.nativeElement as HTMLElement;
828+
const img = nativeElement.querySelector('img')!;
829+
expect(img.getAttribute('ng-img')).not.toBeNull();
830+
});
831+
});
832+
810833
describe('fill mode', () => {
811834
it('should allow unsized images in fill mode', () => {
812835
setupTestingModule();

0 commit comments

Comments
 (0)