fix(image): preload should respect crossOrigin (#40676)

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

Currently, `link[rel=preload]` inserted by `priority` will not have the `crossOrigin` attribute, which will cause the preloaded response not to be used, since the CORS policy mismatches. The PR fixes that.

Author: SukkaW

packages/next/client/future/image.tsx

@@ -825,10 +825,14 @@ export default function Image({
     imageSrcSetPropName = 'imageSrcSet'
     imageSizesPropName = 'imageSizes'
   }
-  const linkProps = {
+  const linkProps: React.DetailedHTMLProps<
+    React.LinkHTMLAttributes<HTMLLinkElement>,
+    HTMLLinkElement
+  > = {
     // Note: imagesrcset and imagesizes are not in the link element type with react 17.
     [imageSrcSetPropName]: imgAttributes.srcSet,
     [imageSizesPropName]: imgAttributes.sizes,
+    crossOrigin: rest.crossOrigin,
   }
 
   const onLoadingCompleteRef = useRef(onLoadingComplete)

packages/next/client/image.tsx

@@ -978,10 +978,14 @@ export default function Image({
     imageSrcSetPropName = 'imageSrcSet'
     imageSizesPropName = 'imageSizes'
   }
-  const linkProps = {
+  const linkProps: React.DetailedHTMLProps<
+    React.LinkHTMLAttributes<HTMLLinkElement>,
+    HTMLLinkElement
+  > = {
     // Note: imagesrcset and imagesizes are not in the link element type with react 17.
     [imageSrcSetPropName]: imgAttributes.srcSet,
     [imageSizesPropName]: imgAttributes.sizes,
+    crossOrigin: rest.crossOrigin,
   }
 
   const useLayoutEffect =

test/integration/image-component/default/pages/priority.js

@@ -12,6 +12,14 @@ const Page = () => {
         width="400"
         height="400"
       ></Image>
+      <Image
+        priority
+        id="basic-image-with-crossorigin"
+        crossOrigin="anonymous"
+        src="/test.jpg"
+        width="400"
+        height="400"
+      ></Image>
       <Image
         loading="eager"
         id="load-eager"

test/integration/image-component/default/test/index.test.ts

@@ -141,6 +141,11 @@ function runTests(mode) {
       expect(
         await browser.elementById('basic-image').getAttribute('loading')
       ).toBe(null)
+      expect(
+        await browser
+          .elementById('basic-image-with-crossorigin')
+          .getAttribute('loading')
+      ).toBe(null)
       expect(
         await browser.elementById('load-eager').getAttribute('loading')
       ).toBe(null)
@@ -157,6 +162,13 @@ function runTests(mode) {
       expect(warnings).not.toMatch(
         /was detected as the Largest Contentful Paint/gm
       )
+
+      // should preload with crossorigin
+      expect(
+        await browser.elementsByCss(
+          'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
+        )
+      ).toHaveLength(1)
     } finally {
       if (browser) {
         await browser.close()

test/integration/image-future/default/pages/priority.js

@@ -12,6 +12,14 @@ const Page = () => {
         width="400"
         height="400"
       ></Image>
+      <Image
+        priority
+        id="basic-image-crossorigin"
+        src="/test.jpg"
+        width="400"
+        height="400"
+        crossOrigin="anonymous"
+      ></Image>
       <Image
         loading="eager"
         id="load-eager"

test/integration/image-future/default/test/index.test.ts

@@ -157,6 +157,13 @@ function runTests(mode) {
       expect(warnings).not.toMatch(
         /was detected as the Largest Contentful Paint/gm
       )
+
+      // should preload with crossorigin
+      expect(
+        await browser.elementsByCss(
+          'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
+        )
+      ).toHaveLength(1)
     } finally {
       if (browser) {
         await browser.close()