Fix next/image noscript tag to only render when lazy (#32918)

Noscript is not required for Image that are loaded immediately

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: Steven <[email protected]>

Author: Ryuurock

packages/next/client/image.tsx

@@ -693,26 +693,28 @@ export default function Image({
         }}
         style={{ ...imgStyle, ...blurStyle }}
       />
-      <noscript>
-        <img
-          {...rest}
-          {...generateImgAttrs({
-            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 && (
+        <noscript>
+          <img
+            {...rest}
+            {...generateImgAttrs({
+              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

test/unit/image-rendering.test.ts

@@ -20,4 +20,30 @@ describe('Image rendering', () => {
     expect(img.attr('src')).toContain('test.png')
     expect(img.attr('srcset')).toContain('test.png')
   })
+
+  it('should only render noscript element when lazy loading', async () => {
+    const element = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+      loading: 'eager',
+    })
+    const element2 = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+      priority: true,
+    })
+    const elementLazy = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+    })
+    const $ = cheerio.load(ReactDOM.renderToString(element))
+    const $2 = cheerio.load(ReactDOM.renderToString(element2))
+    const $lazy = cheerio.load(ReactDOM.renderToString(elementLazy))
+    expect($('noscript').length).toBe(0)
+    expect($2('noscript').length).toBe(0)
+    expect($lazy('noscript').length).toBe(1)
+  })
 })