From 65e704daa47c298449b84d9e8720301b3a6dc719 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 2 Mar 2022 14:59:02 -0500
Subject: [PATCH] Fix `next/image` noscript when blur and priority (#34973)

Fixes a bug where browsers with scripts disabled did not work with `<Image placeholder="blur" priority />`.

- Introduced in #32918
---
 packages/next/client/image.tsx    |  2 +-
 test/unit/image-rendering.test.ts | 33 +++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 6fad0b58d355..8322783f0b51 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -722,7 +722,7 @@ export default function Image({
         ref={imgRef}
         style={{ ...imgStyle, ...blurStyle }}
       />
-      {isLazy && (
+      {(isLazy || placeholder === 'blur') && (
         <noscript>
           <img
             {...rest}
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)
+  })
 })