diff --git a/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts b/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts
index 382d2f020f43..5c7c38a92275 100644
--- a/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts
+++ b/packages/common/src/directives/ng_optimized_image/image_loaders/image_loader.ts
@@ -46,7 +46,7 @@ export type ImageLoader = (config: ImageLoaderConfig) => string;
* @see `ImageLoader`
* @see `NgOptimizedImage`
*/
-const noopImageLoader = (config: ImageLoaderConfig) => config.src;
+export const noopImageLoader = (config: ImageLoaderConfig) => config.src;
/**
* Injection token that configures the image loader function.
diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
index d645a97e9fd7..9736ffea319a 100644
--- a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
+++ b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -12,7 +12,7 @@ import {RuntimeErrorCode} from '../../errors';
import {isPlatformServer} from '../../platform_id';
import {imgDirectiveDetails} from './error_helper';
-import {IMAGE_LOADER} from './image_loaders/image_loader';
+import {IMAGE_LOADER, noopImageLoader} from './image_loaders/image_loader';
import {LCPImageObserver} from './lcp_image_observer';
import {PreconnectLinkChecker} from './preconnect_link_checker';
import {PreloadLinkCreator} from './preload-link-creator';
@@ -430,7 +430,8 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
if (this.ngSrcset) {
rewrittenSrcset = this.getRewrittenSrcset();
- } else if (!this._disableOptimizedSrcset && !this.srcset) {
+ } else if (
+ !this._disableOptimizedSrcset && !this.srcset && this.imageLoader !== noopImageLoader) {
rewrittenSrcset = this.getAutomaticSrcset();
}
diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
index 8870960cee71..5d21ff0feb91 100644
--- a/packages/common/test/directives/ng_optimized_image_spec.ts
+++ b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -1363,6 +1363,20 @@ describe('Image directive', () => {
return `${IMG_BASE_URL}/${config.src}${width}`;
};
+ it('should not generate a srcset if the default noop loader is used', () => {
+ setupTestingModule({noLoader: true});
+
+ const template = `
+
+ `;
+ const fixture = createTestComponent(template);
+ fixture.detectChanges();
+
+ const nativeElement = fixture.nativeElement as HTMLElement;
+ const img = nativeElement.querySelector('img')!;
+ expect(img.getAttribute('srcset')).toBeNull();
+ });
+
it('should add a responsive srcset to the img element if sizes attribute exists', () => {
setupTestingModule({imageLoader});
@@ -1500,6 +1514,7 @@ class TestComponent {
function setupTestingModule(config?: {
imageConfig?: ImageConfig,
imageLoader?: ImageLoader,
+ noLoader?: boolean,
extraProviders?: Provider[],
component?: Type
}) {
@@ -1510,8 +1525,8 @@ function setupTestingModule(config?: {
const loader = config?.imageLoader || defaultLoader;
const extraProviders = config?.extraProviders || [];
const providers: Provider[] = [
- {provide: DOCUMENT, useValue: window.document}, {provide: IMAGE_LOADER, useValue: loader},
- ...extraProviders
+ {provide: DOCUMENT, useValue: window.document},
+ ...(config?.noLoader ? [] : [{provide: IMAGE_LOADER, useValue: loader}]), ...extraProviders
];
if (config?.imageConfig) {
providers.push({provide: IMAGE_CONFIG, useValue: config.imageConfig});