fix(image): preload should respect referrerPolicy (#49584)

This is a bug fix PR.

We should respect referrerPolicy when preloading a priority next/image

Reproduce codesandbox: https://codesandbox.io/p/sandbox/boring-fog-4o28oi
As you can see, the image still request with `referer` header although we have `referrerPolicy="no-referrer" in img attribute.

<img width="645" alt="image" src="https://github.com/vercel/next.js/assets/5862369/6a2779d3-e0e2-4dfe-80d2-c8a4243f430b">

Author: Fonger

packages/next/src/client/image.tsx

@@ -970,6 +970,7 @@ const Image = forwardRef<HTMLImageElement | null, ImageProps>(
               imageSrcSet={imgAttributes.srcSet}
               imageSizes={imgAttributes.sizes}
               crossOrigin={rest.crossOrigin}
+              referrerPolicy={rest.referrerPolicy}
               {...getDynamicProps(fetchPriority)}
             />
           </Head>

packages/next/src/client/legacy/image.tsx

@@ -979,6 +979,7 @@ export default function Image({
     imageSrcSet: imgAttributes.srcSet,
     imageSizes: imgAttributes.sizes,
     crossOrigin: rest.crossOrigin,
+    referrerPolicy: rest.referrerPolicy,
   }
 
   const useLayoutEffect =

test/integration/next-image-legacy/default/pages/priority.js

@@ -20,6 +20,14 @@ const Page = () => {
         width="400"
         height="400"
       ></Image>
+      <Image
+        priority
+        id="basic-image-with-referrerpolicy"
+        referrerPolicy="no-referrer"
+        src="/test.png"
+        width="400"
+        height="400"
+      ></Image>
       <Image
         loading="eager"
         id="load-eager"

test/integration/next-image-legacy/default/test/index.test.ts

@@ -131,6 +131,11 @@ function runTests(mode) {
           imagesrcset:
             '/_next/image?url=%2Ftest.jpg&w=640&q=75 1x, /_next/image?url=%2Ftest.jpg&w=828&q=75 2x',
         },
+        {
+          imagesizes: '',
+          imagesrcset:
+            '/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x',
+        },
         {
           imagesizes: '100vw',
           imagesrcset:
@@ -147,6 +152,11 @@ function runTests(mode) {
           .elementById('basic-image-with-crossorigin')
           .getAttribute('loading')
       ).toBe(null)
+      expect(
+        await browser
+          .elementById('basic-image-with-referrerpolicy')
+          .getAttribute('loading')
+      ).toBe(null)
       expect(
         await browser.elementById('load-eager').getAttribute('loading')
       ).toBe(null)
@@ -170,6 +180,13 @@ function runTests(mode) {
           'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
         )
       ).toHaveLength(1)
+
+      // should preload with referrerpolicy
+      expect(
+        await browser.elementsByCss(
+          'link[rel=preload][as=image][referrerpolicy="no-referrer"][imagesrcset*="test.png"]'
+        )
+      ).toHaveLength(1)
     } finally {
       if (browser) {
         await browser.close()

test/integration/next-image-new/app-dir/app/priority/page.js

@@ -22,6 +22,15 @@ const Page = () => {
         height="400"
         crossOrigin="anonymous"
       ></Image>
+      <Image
+        priority
+        id="basic-image-referrerpolicy"
+        alt="basic-image-referrerpolicy"
+        src="/test.png"
+        width="400"
+        height="400"
+        referrerPolicy="no-referrer"
+      ></Image>
       <Image
         loading="eager"
         id="load-eager"

test/integration/next-image-new/app-dir/test/index.test.ts

@@ -204,6 +204,13 @@ function runTests(mode) {
           'link[rel=preload][as=image][crossorigin=anonymous][imagesrcset*="test.jpg"]'
         )
       ).toHaveLength(1)
+
+      // should preload with referrerpolicy
+      expect(
+        await browser.elementsByCss(
+          'link[rel=preload][as=image][referrerpolicy="no-referrer"][imagesrcset*="test.png"]'
+        )
+      ).toHaveLength(1)
     } finally {
       if (browser) {
         await browser.close()

test/integration/next-image-new/default/pages/priority.js

@@ -22,6 +22,15 @@ const Page = () => {
         height="400"
         crossOrigin="anonymous"
       ></Image>
+      <Image
+        priority
+        id="basic-image-referrerpolicy"
+        alt="basic-image-referrerpolicy"
+        src="/test.png"
+        width="400"
+        height="400"
+        referrerPolicy="no-referrer"
+      ></Image>
       <Image
         loading="eager"
         id="load-eager"

test/integration/next-image-new/default/test/index.test.ts

@@ -204,6 +204,13 @@ function runTests(mode) {
           )
         ).length
       ).toBeGreaterThanOrEqual(1)
+
+      // should preload with referrerpolicy
+      expect(
+        await browser.elementsByCss(
+          'link[rel=preload][as=image][referrerpolicy="no-referrer"][imagesrcset*="test.png"]'
+        )
+      ).toHaveLength(1)
     } finally {
       if (browser) {
         await browser.close()