angular · SkyZeroZx · Jul 11, 2026 · JeanMeche · Jul 11, 2026 · SkyZeroZx
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
@@ -528,6 +528,7 @@ export class NgOptimizedImage implements OnInit, OnChanges {
         this.getRewrittenSrc(),
         rewrittenSrcset,
         this.sizes,
+        this.imgElement.getAttribute('crossorigin'),
       );
     }
   }

diff --git a/packages/common/src/directives/ng_optimized_image/preload-link-creator.ts b/packages/common/src/directives/ng_optimized_image/preload-link-creator.ts
@@ -47,8 +47,17 @@ export class PreloadLinkCreator {
    * @param src The original src of the image that is set on the `ngSrc` input.
    * @param srcset The parsed and formatted srcset created from the `ngSrcset` input
    * @param sizes The value of the `sizes` attribute passed in to the `<img>` tag
+   * @param crossOrigin The value of the `crossorigin` attribute passed in to the `<img>` tag
    */
-  createPreloadLinkTag(renderer: Renderer2, src: string, srcset?: string, sizes?: string): void {
+  createPreloadLinkTag(
+    renderer: Renderer2,
+    src: string,
+    srcset?: string,
+    sizes?: string,
+    crossOrigin?: string | null,
+  ): void {
+    const preloadKey = JSON.stringify([src, getCrossOriginMode(crossOrigin)]);
+
     if (
       ngDevMode &&
       !this.errorShown &&
@@ -66,18 +75,22 @@ export class PreloadLinkCreator {
       );
     }
 
-    if (this.preloadedImages.has(src)) {
+    if (this.preloadedImages.has(preloadKey)) {
       return;
     }
 
-    this.preloadedImages.add(src);
+    this.preloadedImages.add(preloadKey);
 
     const preload = renderer.createElement('link');
     renderer.setAttribute(preload, 'as', 'image');
     renderer.setAttribute(preload, 'href', src);
     renderer.setAttribute(preload, 'rel', 'preload');
     renderer.setAttribute(preload, 'fetchpriority', 'high');
 
+    if (crossOrigin != null) {
+      renderer.setAttribute(preload, 'crossorigin', crossOrigin);
+    }
+
     if (sizes) {
       renderer.setAttribute(preload, 'imageSizes', sizes);
     }
@@ -89,3 +102,11 @@ export class PreloadLinkCreator {
     renderer.appendChild(this.document.head, preload);
   }
 }
+
+function getCrossOriginMode(crossOrigin?: string | null): string | null {
+  if (crossOrigin == null) {
+    return null;
+  }
+
+  return crossOrigin.toLowerCase() === 'use-credentials' ? 'use-credentials' : 'anonymous';
+}
diff --git a/packages/common/src/directives/ng_optimized_image/tokens.ts b/packages/common/src/directives/ng_optimized_image/tokens.ts
@@ -17,11 +17,9 @@ import {InjectionToken} from '@angular/core';
 export const DEFAULT_PRELOADED_IMAGES_LIMIT = 5;
 
 /**
- * Helps to keep track of priority images that already have a corresponding
- * preload tag (to avoid generating multiple preload tags with the same URL).
- *
- * This Set tracks the original src passed into the `ngSrc` input not the src after it has been
- * run through the specified `IMAGE_LOADER`.
+ * Helps to keep track of priority images that already have a corresponding preload tag. Each key
+ * identifies the rewritten image URL and its CORS mode, since preload tags with different CORS
+ * modes are not interchangeable.
  */
 export const PRELOADED_IMAGES = new InjectionToken<Set<string>>(
   typeof ngDevMode === 'undefined' || ngDevMode ? 'NG_OPTIMIZED_PRELOADED_IMAGES' : '',

diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -67,7 +67,7 @@ describe('Image directive', () => {
           ],
         });
 
-        const template = `<img ngSrc="${src}" width="150" height="50" priority sizes="10vw" ngSrcset="100w">`;
+        const template = `<img ngSrc="${src}" width="150" height="50" priority sizes="10vw" ngSrcset="100w" crossorigin="anonymous">`;
         TestBed.overrideComponent(TestComponent, {set: {template: template}});
 
         const _document = TestBed.inject(DOCUMENT);
@@ -98,6 +98,7 @@ describe('Image directive', () => {
         expect(preloadLink!.getAttribute('imagesizes')).toEqual('10vw');
         expect(preloadLink!.getAttribute('imagesrcset')).toEqual(`${rewrittenSrc}?width=100 100w`);
         expect(preloadLink!.getAttribute('fetchpriority')).toEqual('high');
+        expect(preloadLink!.getAttribute('crossorigin')).toEqual('anonymous');
 
         preloadLink!.remove();
       });
@@ -133,7 +134,7 @@ describe('Image directive', () => {
 
         const preloadImages = TestBed.inject(PRELOADED_IMAGES);
 
-        expect(preloadImages.has(rewrittenSrc)).toBeTruthy();
+        expect(preloadImages.has(JSON.stringify([rewrittenSrc, null]))).toBeTruthy();
 
         const preloadLinks = head.querySelectorAll(`link[href="${rewrittenSrc}"]`);
 
@@ -142,6 +143,40 @@ describe('Image directive', () => {
         preloadLinks[0]!.remove();
       });
 
+      it('should create separate preload links for images with different CORS modes', async () => {
+        if (!isBrowser) return;
+
+        const src = 'preload-cors/img.png';
+        const rewrittenSrc = `https://angular.dev/${src}`;
+
+        setupTestingModule({
+          extraProviders: [
+            {provide: PLATFORM_ID, useValue: PLATFORM_SERVER_ID},
+            {
+              provide: IMAGE_LOADER,
+              useValue: (config: ImageLoaderConfig) => `https://angular.dev/${config.src}`,
+            },
+          ],
+        });
+
+        const template = `
+          <img ngSrc="${src}" width="150" height="50" priority>
+          <img ngSrc="${src}" width="150" height="50" priority crossorigin="anonymous">
+        `;
+        TestBed.overrideComponent(TestComponent, {set: {template}});
+
+        const _document = TestBed.inject(DOCUMENT);
+        const fixture = TestBed.createComponent(TestComponent);
+        await fixture.whenStable();
+
+        const preloadLinks = _document.head.querySelectorAll(`link[href="${rewrittenSrc}"]`);
+        expect(preloadLinks.length).toEqual(2);
+        expect(preloadLinks[0]!.hasAttribute('crossorigin')).toBeFalse();
+        expect(preloadLinks[1]!.getAttribute('crossorigin')).toEqual('anonymous');
+
+        preloadLinks.forEach((link) => link.remove());
+      });
+
       it('should warn when the number of preloaded images is larger than the limit', () => {
         // Only run this test in a browser since the Node-based DOM mocks don't
         // allow to override `HTMLImageElement.prototype.setAttribute` easily.