Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(common): drop the loader input in favor of IMAGE_LOADER token (#47082)

Browse source 
This commit updates the `NgOptimizedImage` directive to drop the `loader` input. Component-specific loaders can still be configured via `IMAGE_LOADER` token and the `loader` input was only useful in case different loaders have to be present in a single template, which doesn't seem to be a common case. We'll be able to re-introduce the input later if needed.

PR Close #47082
This commit is contained in:
Andrew Kushnir 2022-05-03 17:03:46 -07:00 committed by Pawel Kozlowski
parent c0d407fccc
commit caccb125e6
2 changed files with 1 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/common/src/directives/ng_optimized_image.ts
View file

@ -94,12 +94,6 @@ export class NgOptimizedImage implements OnInit {
return this._height;
}
/**
* Function that takes the name of the image, its width, and a quality %,
* then turns it into a valid image CDN URL.
*/
@Input() loader?: (config: ImageLoaderConfig) => string;
/**
* Get a value of the `src` if it's set on a host <img> element.
* This input is needed to verify that there are no `src` and `raw-src` provided
@ -114,9 +108,6 @@ export class NgOptimizedImage implements OnInit {
}
getRewrittenSrc(): string {
// If a loader is provided as an input - use it, otherwise fall back
// to the loader configured globally using the `IMAGE_LOADER` token.
const imgLoader = this.loader ?? this.imageLoader;
const imgConfig = {
src: this.rawSrc,
// TODO: if we're going to support responsive serving, we don't want to request the width
@ -124,7 +115,7 @@ export class NgOptimizedImage implements OnInit {
// The width would require pre-processing before passing to the image loader function.
width: this.width,
};
return imgLoader(imgConfig);
return this.imageLoader(imgConfig);
}
}

19
packages/common/test/directives/ng_optimized_image_spec.ts
View file

@ -38,22 +38,6 @@ describe('Image directive', () => {
expect(img.src.endsWith('/path/img.png?w=150')).toBeTrue();
});
it('should use an image loader from inputs over the one provided via `IMAGE_LOADER` token',
() => {
const imageLoader = (config: ImageLoaderConfig) =>
`${config.src}?w=${config.width}&source=IMAGE_LOADER`;
setupTestingModule({imageLoader});
const template =
'<img raw-src="path/img.png" [loader]="cmpImageLoader" width="150" height="50">';
const fixture = createTestComponent(template);
fixture.detectChanges();
const nativeElement = fixture.nativeElement as HTMLElement;
const img = nativeElement.querySelector('img')!;
expect(img.src.endsWith('/path/img.png?w=150&source=component')).toBeTrue();
});
describe('setup error handling', () => {
it('should throw if both `src` and `raw-src` are present', () => {
setupTestingModule();
@ -79,9 +63,6 @@ describe('Image directive', () => {
template: '',
})
class TestComponent {
cmpImageLoader = (config: ImageLoaderConfig) => {
return `${config.src}?w=${config.width}&source=component`;
}
}
function setupTestingModule(config?: {imageLoader: ImageLoader}) {