Sitelet https://github.com/angular/angular/commit/2cecc4aa6089ffa6fa844465dac10074b430a3dc
Skip to content

Commit 2cecc4a

Browse files
arturovtatscott
authored andcommitted
fix(common): let NgOptimizedImage pass a [srcset] binding through when srcset optimization is disabled
NgOptimizedImage declares a `srcset` input, so a `[srcset]="..."` binding is captured by the directive and never reaches the `<img>` element. The directive only reads that input for a conflict check, so with `disableOptimizedSrcset` the image ended up with no `srcset` at all. The only way to set one was `[attr.srcset]`. Now, when `disableOptimizedSrcset` is set and the directive isn't generating its own srcset, the value from the `[srcset]` binding is written back to the element. Fixes #49335
1 parent 2b89a3b commit 2cecc4a

2 files changed

Lines changed: 24 additions & 2 deletions

File tree

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -391,8 +391,10 @@ export class NgOptimizedImage implements OnInit, OnChanges {
391391

392392
/**
393393
* Value of the `srcset` attribute if set on the host `<img>` element.
394-
* This input is exclusively read to assert that `srcset` is not set in conflict
395-
* with `ngSrcset` and that images don't start to load until a lazy loading strategy is set.
394+
* This input is read to assert that `srcset` is not set in conflict with `ngSrcset` and that
395+
* images don't start to load until a lazy loading strategy is set. When `disableOptimizedSrcset`
396+
* is set, this value is also written back to the host element's `srcset` attribute (otherwise a
397+
* `[srcset]` binding would be captured by this input and never reach the DOM).
396398
* @internal
397399
*/
398400
@Input() srcset?: string;
@@ -692,6 +694,10 @@ export class NgOptimizedImage implements OnInit, OnChanges {
692694

693695
if (rewrittenSrcset) {
694696
this.setHostAttribute('srcset', rewrittenSrcset);
697+
} else if (this.disableOptimizedSrcset && this.srcset) {
698+
// A `[srcset]` binding is captured by the `srcset` input rather than reaching the DOM. When
699+
// the user opted out of optimized srcset generation, pass their value through unchanged.
700+
this.setHostAttribute('srcset', this.srcset);
695701
}
696702
return rewrittenSrcset;
697703
}

‎packages/common/test/directives/ng_optimized_image_spec.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2585,6 +2585,22 @@ describe('Image directive', () => {
25852585
const img = nativeElement.querySelector('img')!;
25862586
expect(img.getAttribute('srcset')).toBeNull();
25872587
});
2588+
2589+
it('should pass a `[srcset]` binding through to the DOM when "disableOptimizedSrcset" is set', async () => {
2590+
// https://github.com/angular/angular/issues/49335
2591+
setupTestingModule({imageLoader});
2592+
2593+
const template = `
2594+
<img ngSrc="img" width="100" height="50" disableOptimizedSrcset
2595+
[srcset]="'https://example.com/a.png 1x, https://example.com/b.png 2x'">
2596+
`;
2597+
const fixture = createTestComponent(template);
2598+
await fixture.whenStable();
2599+
const img = (fixture.nativeElement as HTMLElement).querySelector('img')!;
2600+
expect(img.getAttribute('srcset')).toBe(
2601+
'https://example.com/a.png 1x, https://example.com/b.png 2x',
2602+
);
2603+
});
25882604
});
25892605
});
25902606
});

0 commit comments

Comments
 (0)