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
vercel · Mar 2, 2022 · 65e704d · 65e704d
1 parent a518036
commit 65e704d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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)
+  })
 })