should render the correct sizes passed when a noscript is rendered (v…

…ercel#37161)

## Bug

- [x] Fixes vercel#36807
- [x] Unit tests added

Please review this PR.

As shown in [this Issue](vercel#36807), the noscript element does not render sizes correctly during SSR.
This change adds `noscriptSizes` to the props passed to `ImageElement` to generate the same `sizes` and `srcset` as the normal img tag that is actually rendered in the browser.

packages/next/client/image.tsx

@@ -163,6 +163,7 @@ type ImageElementProps = Omit<ImageProps, 'src' | 'loader'> & {
   setBlurComplete: (b: boolean) => void
   setIntersection: (img: HTMLImageElement | null) => void
   isVisible: boolean
+  noscriptSizes: string | undefined
 }
 
 function getWidths(
@@ -830,6 +831,7 @@ export default function Image({
     setBlurComplete,
     setIntersection,
     isVisible,
+    noscriptSizes: sizes,
     ...rest,
   }
   return (
@@ -910,6 +912,7 @@ const ImageElement = ({
   onLoad,
   onError,
   isVisible,
+  noscriptSizes,
   ...rest
 }: ImageElementProps) => {
   return (
@@ -982,7 +985,7 @@ const ImageElement = ({
               layout,
               width: widthInt,
               quality: qualityInt,
-              sizes: imgAttributes.sizes,
+              sizes: noscriptSizes,
               loader,
             })}
             {...(layout === 'raw'

test/unit/image-rendering.test.ts

@@ -79,4 +79,19 @@ describe('Image rendering', () => {
     expect($2('noscript').length).toBe(1)
     expect($3('noscript').length).toBe(1)
   })
+
+  it('should render the correct sizes passed when a noscript element is rendered', async () => {
+    const element = React.createElement(Image, {
+      src: '/test.png',
+      width: 100,
+      height: 100,
+      sizes: '50vw',
+    })
+    const $ = cheerio.load(ReactDOM.renderToString(element))
+    const noscriptImg = $('noscript img')
+    expect(noscriptImg.attr('sizes')).toBe('50vw')
+    expect(noscriptImg.attr('srcset')).toContain(
+      '/_next/image?url=%2Ftest.png&w=384&q=75 384w'
+    )
+  })
 })