From 53f0973abaa5db4961dc03b226698d3c4ddbcf2b Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Thu, 19 Aug 2021 00:26:07 -0400
Subject: [PATCH] Fix `next/image` blur placeholder when JS is disabled
 (#28269)

This PR does a few things:

- Moves `<noscript>` usage below the blur image since so that the `<noscript>` image renders on top of the blur image
- Remove the `isVisible` check for `<noscript>` since we can't rely on client-side JS
- Add `loading=lazy` to the `<noscript>` image to take advantage of native lazy loading (can't rely on JS lazy loading)

Fixes #28251
---
 packages/next/client/image.tsx                | 40 +++++++++----------
 packages/next/types/index.d.ts                |  5 +++
 .../export-image-loader/test/index.test.js    |  2 +-
 .../default/test/index.test.js                |  2 +-
 4 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 951d8c60c6d6188..de6525b37f602e8 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -597,26 +597,6 @@ export default function Image({
           ) : null}
         </div>
       ) : null}
-      {!isVisible && (
-        <noscript>
-          <img
-            {...rest}
-            {...generateImgAttrs({
-              src,
-              unoptimized,
-              layout,
-              width: widthInt,
-              quality: qualityInt,
-              sizes,
-              loader,
-            })}
-            decoding="async"
-            data-nimg
-            style={imgStyle}
-            className={className}
-          />
-        </noscript>
-      )}
       <img
         {...rest}
         {...imgAttributes}
@@ -629,6 +609,26 @@ export default function Image({
         }}
         style={{ ...imgStyle, ...blurStyle }}
       />
+      <noscript>
+        <img
+          {...rest}
+          {...generateImgAttrs({
+            src,
+            unoptimized,
+            layout,
+            width: widthInt,
+            quality: qualityInt,
+            sizes,
+            loader,
+          })}
+          decoding="async"
+          data-nimg
+          style={imgStyle}
+          className={className}
+          loading={loading || 'lazy'}
+        />
+      </noscript>
+
       {priority ? (
         // Note how we omit the `href` attribute, as it would only be relevant
         // for browsers that do not support `imagesrcset`, and in those cases
diff --git a/packages/next/types/index.d.ts b/packages/next/types/index.d.ts
index 4abaab83eb3cf9f..b1bc5ea2e074451 100644
--- a/packages/next/types/index.d.ts
+++ b/packages/next/types/index.d.ts
@@ -40,6 +40,11 @@ declare module 'react' {
   interface LinkHTMLAttributes<T> extends HTMLAttributes<T> {
     nonce?: string
   }
+
+  // <img loading="lazy"> support
+  interface ImgHTMLAttributes<T> extends HTMLAttributes<T> {
+    loading?: 'auto' | 'eager' | 'lazy'
+  }
 }
 
 export type Redirect =
diff --git a/test/integration/export-image-loader/test/index.test.js b/test/integration/export-image-loader/test/index.test.js
index ebc63aa6b93aef3..966afc18e7d6ce4 100644
--- a/test/integration/export-image-loader/test/index.test.js
+++ b/test/integration/export-image-loader/test/index.test.js
@@ -74,7 +74,7 @@ describe('Export with custom loader next/image component', () => {
   it('should contain img element with same src in html output', async () => {
     const html = await fs.readFile(join(outdir, 'index.html'))
     const $ = cheerio.load(html)
-    expect($('img[alt="icon"]').attr('src')).toBe('/custom/i.png')
+    expect($('img[src="/custom/o.png"]')).toBeDefined()
   })
 
   afterAll(async () => {
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 555a2f134fe4ce1..1d2e5eb6f79cb9e 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -151,7 +151,7 @@ function runTests(mode) {
     const els = [].slice.apply($html('img'))
     expect(els.length).toBe(2)
 
-    const [noscriptEl, el] = els
+    const [el, noscriptEl] = els
     expect(noscriptEl.attribs.src).toBeDefined()
     expect(noscriptEl.attribs.srcset).toBeDefined()