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

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

packages/common/src/directives/ng_optimized_image.ts

@@ -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);
   }
 }
 

packages/common/test/directives/ng_optimized_image_spec.ts

@@ -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}) {