From 588bef3fa8a1006a49ef3f9502d22d7ad0b9b4ef Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 2 Mar 2022 12:56:34 -0500
Subject: [PATCH 1/2] Fix `next/image` noscript when blur and priority

---
 packages/next/client/image.tsx | 47 +++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 6fad0b58d355..b8ed92e107dc 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -722,29 +722,30 @@ export default function Image({
         ref={imgRef}
         style={{ ...imgStyle, ...blurStyle }}
       />
-      {isLazy && (
-        <noscript>
-          <img
-            {...rest}
-            {...generateImgAttrs({
-              config,
-              src,
-              unoptimized,
-              layout,
-              width: widthInt,
-              quality: qualityInt,
-              sizes,
-              loader,
-            })}
-            decoding="async"
-            data-nimg={layout}
-            style={imgStyle}
-            className={className}
-            // @ts-ignore - TODO: upgrade to `@types/react@17`
-            loading={loading || 'lazy'}
-          />
-        </noscript>
-      )}
+      {isLazy ||
+        (placeholder === 'blur' && (
+          <noscript>
+            <img
+              {...rest}
+              {...generateImgAttrs({
+                config,
+                src,
+                unoptimized,
+                layout,
+                width: widthInt,
+                quality: qualityInt,
+                sizes,
+                loader,
+              })}
+              decoding="async"
+              data-nimg={layout}
+              style={imgStyle}
+              className={className}
+              // @ts-ignore - TODO: upgrade to `@types/react@17`
+              loading={loading || 'lazy'}
+            />
+          </noscript>
+        ))}
 
       {priority ? (
         // Note how we omit the `href` attribute, as it would only be relevant

From 383d5a36b6dc7e938577210cf58637ae8307bc03 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 2 Mar 2022 14:36:25 -0500
Subject: [PATCH 2/2] Fix and add test

---
 packages/next/client/image.tsx    | 47 +++++++++++++++----------------
 test/unit/image-rendering.test.ts | 33 ++++++++++++++++++++++
 2 files changed, 56 insertions(+), 24 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index b8ed92e107dc..8322783f0b51 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -722,30 +722,29 @@ export default function Image({
         ref={imgRef}
         style={{ ...imgStyle, ...blurStyle }}
       />
-      {isLazy ||
-        (placeholder === 'blur' && (
-          <noscript>
-            <img
-              {...rest}
-              {...generateImgAttrs({
-                config,
-                src,
-                unoptimized,
-                layout,
-                width: widthInt,
-                quality: qualityInt,
-                sizes,
-                loader,
-              })}
-              decoding="async"
-              data-nimg={layout}
-              style={imgStyle}
-              className={className}
-              // @ts-ignore - TODO: upgrade to `@types/react@17`
-              loading={loading || 'lazy'}
-            />
-          </noscript>
-        ))}
+      {(isLazy || placeholder === 'blur') && (
+        <noscript>
+          <img
+            {...rest}
+            {...generateImgAttrs({
+              config,
+              src,
+              unoptimized,
+              layout,
+              width: widthInt,
+              quality: qualityInt,
+              sizes,
+              loader,
+            })}
+            decoding="async"
+            data-nimg={layout}
+            style={imgStyle}
+            className={className}
+            // @ts-ignore - TODO: upgrade to `@types/react@17`
+            loading={loading || 'lazy'}
+          />
+        </noscript>
+      )}
 
       {priority ? (
         // Note how we omit the `href` attribute, as it would only be relevant
diff --git a/test/unit/image-rendering.test.ts b/test/unit/image-rendering.test.ts
index 0a84e3e443c2..1dad98dd6e81 100644
--- a/test/unit/image-rendering.test.ts
+++ b/test/unit/image-rendering.test.ts
@@ -46,4 +46,37 @@ describe('Image rendering', () => {
     expect($2('noscript').length).toBe(0)
     expect($lazy('noscript').length).toBe(1)
   })
+
+  it('should render noscript element when placeholder=blur', async () => {
+    const element1 = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+      loading: 'eager',
+      placeholder: 'blur',
+      blurDataURL: 'data:image/png;base64',
+    })
+    const element2 = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+      placeholder: 'blur',
+      blurDataURL: 'data:image/png;base64',
+      loading: 'eager',
+    })
+    const element3 = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+      placeholder: 'blur',
+      blurDataURL: 'data:image/png;base64',
+      priority: true,
+    })
+    const $1 = cheerio.load(ReactDOM.renderToString(element1))
+    const $2 = cheerio.load(ReactDOM.renderToString(element2))
+    const $3 = cheerio.load(ReactDOM.renderToString(element3))
+    expect($1('noscript').length).toBe(1)
+    expect($2('noscript').length).toBe(1)
+    expect($3('noscript').length).toBe(1)
+  })
 })