From 6c581955ab28deedbd1954758caec11170917d5a Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 1 Jun 2022 18:10:24 -0400
Subject: [PATCH 1/3] Fix `next/image` using `layout=raw` with `priority`

---
 packages/next/client/image.tsx                  |  3 ++-
 .../image-component/default/pages/priority.js   |  6 +++---
 .../image-component/default/test/index.test.js  | 17 +++++++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 0edf70436fd9d..45fc97856038b 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -901,7 +901,7 @@ const ImageElement = ({
   blurStyle,
   isLazy,
   placeholder,
-  loading = 'lazy',
+  loading,
   srcString,
   config,
   unoptimized,
@@ -915,6 +915,7 @@ const ImageElement = ({
   noscriptSizes,
   ...rest
 }: ImageElementProps) => {
+  loading = isLazy ? 'lazy' : loading
   return (
     <>
       <img
diff --git a/test/integration/image-component/default/pages/priority.js b/test/integration/image-component/default/pages/priority.js
index 3adb39db7984d..2be1f1a2d00c1 100644
--- a/test/integration/image-component/default/pages/priority.js
+++ b/test/integration/image-component/default/pages/priority.js
@@ -7,14 +7,14 @@ const Page = () => {
       <p>Priority Page</p>
       <Image
         priority
-        id="basic-image"
+        id="default"
         src="/test.jpg"
         width="400"
         height="400"
       ></Image>
       <Image
         loading="eager"
-        id="basic-image"
+        id="load-eager"
         src="/test.png"
         width="400"
         height="400"
@@ -37,7 +37,7 @@ const Page = () => {
       />
       <Image
         priority
-        id="raw"
+        id="raw1"
         src="/test.webp"
         width="1200"
         height="700"
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 2a0febd83130d..041468ec40527 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -142,6 +142,23 @@ function runTests(mode) {
         },
       ])
 
+      // When priority={true}, we should _not_ set loading="lazy"
+      expect(await browser.elementById('default').getAttribute('loading')).toBe(
+        null
+      )
+      expect(
+        await browser.elementById('load-eager').getAttribute('loading')
+      ).toBe(null)
+      expect(
+        await browser.elementById('responsive1').getAttribute('loading')
+      ).toBe(null)
+      expect(
+        await browser.elementById('responsive2').getAttribute('loading')
+      ).toBe(null)
+      expect(await browser.elementById('raw1').getAttribute('loading')).toBe(
+        null
+      )
+
       const warnings = (await browser.log('browser'))
         .map((log) => log.message)
         .join('\n')

From ce0e0bd1c4e66fd437966deeaae318082f2548c3 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 1 Jun 2022 18:51:10 -0400
Subject: [PATCH 2/3] Fix lazy loading when placeholder=blur

---
 packages/next/client/image.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 45fc97856038b..8ee3602dbe810 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -457,7 +457,11 @@ export default function Image({
     unoptimized = true
     isLazy = false
   }
-  if (typeof window !== 'undefined' && loadedImageURLs.has(src)) {
+  if (
+    typeof window !== 'undefined' &&
+    loadedImageURLs.has(src) &&
+    layout !== 'raw'
+  ) {
     isLazy = false
   }
 

From c1eb5d5eb7230b3c04baad8e633062cb4ef691cb Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 1 Jun 2022 18:51:21 -0400
Subject: [PATCH 3/3] Fix test failing with missing img

---
 test/integration/image-component/default/pages/priority.js  | 2 +-
 test/integration/image-component/default/test/index.test.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/integration/image-component/default/pages/priority.js b/test/integration/image-component/default/pages/priority.js
index 2be1f1a2d00c1..29a03f141871c 100644
--- a/test/integration/image-component/default/pages/priority.js
+++ b/test/integration/image-component/default/pages/priority.js
@@ -7,7 +7,7 @@ const Page = () => {
       <p>Priority Page</p>
       <Image
         priority
-        id="default"
+        id="basic-image"
         src="/test.jpg"
         width="400"
         height="400"
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 041468ec40527..e50103103a293 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -143,9 +143,9 @@ function runTests(mode) {
       ])
 
       // When priority={true}, we should _not_ set loading="lazy"
-      expect(await browser.elementById('default').getAttribute('loading')).toBe(
-        null
-      )
+      expect(
+        await browser.elementById('basic-image').getAttribute('loading')
+      ).toBe(null)
       expect(
         await browser.elementById('load-eager').getAttribute('loading')
       ).toBe(null)