skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(common): apply fixed_srcset_width value only to fixed srcsets (#52459)

Browse Source 
add logic to NgOptimizedImage to keep fixed_srcset_width from applying to large responsive images, which is incorrect behavior

PR Close #52459
This commit is contained in:
Alex Castle
2023-10-30 14:25:24 -07:00
committed by Alex Rickabaugh
parent af46256043
commit 3bd85fb7b0
2 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
+6 -1
View File
@@ -513,8 +513,13 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
}
private shouldGenerateAutomaticSrcset(): boolean {
let oversizedImage = false;
if (!this.sizes) {
oversizedImage =
this.width! > FIXED_SRCSET_WIDTH_LIMIT || this.height! > FIXED_SRCSET_HEIGHT_LIMIT;
}
return !this.disableOptimizedSrcset && !this.srcset && this.imageLoader !== noopImageLoader &&
!(this.width! > FIXED_SRCSET_WIDTH_LIMIT || this.height! > FIXED_SRCSET_HEIGHT_LIMIT);
!oversizedImage;
}
/** @nodoc */
packages/common/test/directives/ng_optimized_image_spec.ts
+32
View File
@@ -1797,6 +1797,38 @@ describe('Image directive', () => {
expect(img.getAttribute('srcset')).toBeNull();
});
it('should add a responsive srcset to the img element if height is too large', () => {
setupTestingModule({imageLoader});
const template = `<img ngSrc="img" width="1100" height="2400" sizes="100vw">`;
const fixture = createTestComponent(template);
fixture.detectChanges();
const nativeElement = fixture.nativeElement as HTMLElement;
const img = nativeElement.querySelector('img')!;
expect(img.getAttribute('srcset'))
.toBe(`${IMG_BASE_URL}/img?w=640 640w, ${IMG_BASE_URL}/img?w=750 750w, ${
IMG_BASE_URL}/img?w=828 828w, ${IMG_BASE_URL}/img?w=1080 1080w, ${
IMG_BASE_URL}/img?w=1200 1200w, ${IMG_BASE_URL}/img?w=1920 1920w, ${
IMG_BASE_URL}/img?w=2048 2048w, ${IMG_BASE_URL}/img?w=3840 3840w`);
});
it('should add a responsive srcset to the img element if width is too large', () => {
setupTestingModule({imageLoader});
const template = `<img ngSrc="img" width="3000" height="400" sizes="100vw">`;
const fixture = createTestComponent(template);
fixture.detectChanges();
const nativeElement = fixture.nativeElement as HTMLElement;
const img = nativeElement.querySelector('img')!;
expect(img.getAttribute('srcset'))
.toBe(`${IMG_BASE_URL}/img?w=640 640w, ${IMG_BASE_URL}/img?w=750 750w, ${
IMG_BASE_URL}/img?w=828 828w, ${IMG_BASE_URL}/img?w=1080 1080w, ${
IMG_BASE_URL}/img?w=1200 1200w, ${IMG_BASE_URL}/img?w=1920 1920w, ${
IMG_BASE_URL}/img?w=2048 2048w, ${IMG_BASE_URL}/img?w=3840 3840w`);
});
it('should use a custom breakpoint set if one is provided', () => {
const imageConfig = {
breakpoints: [16, 32, 48, 64, 96, 128, 256, 384, 640, 1280, 3840],