Fix layout="raw" image element sizes prop (#35809)

This fixes an issue with how the sizes prop was being applied to images with the experimental raw layout. The only effects were on the raw layout, so won't effect any non-experimental functionality.
vercel · Apr 1, 2022 · 352e60d · 352e60d
1 parent 0eb9f7e
commit 352e60d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -843,7 +843,6 @@ const ImageElement = ({
   imgRef,
   placeholder,
   loading,
-  sizes,
   srcString,
   config,
   unoptimized,
@@ -855,7 +854,7 @@ const ImageElement = ({
       <img
         {...rest}
         {...imgAttributes}
-        {...(layout === 'raw' && !sizes
+        {...(layout === 'raw' && !imgAttributes.sizes
           ? { height: heightInt, width: widthInt }
           : {})}
         decoding="async"
@@ -875,10 +874,10 @@ const ImageElement = ({
               layout,
               width: widthInt,
               quality: qualityInt,
-              sizes,
+              sizes: imgAttributes.sizes,
               loader,
             })}
-            {...(layout === 'raw' && !sizes
+            {...(layout === 'raw' && !imgAttributes.sizes
               ? { height: heightInt, width: widthInt }
               : {})}
             decoding="async"

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -610,13 +610,23 @@ function runTests(mode) {
       expect(await browser.elementById('raw1').getAttribute('style')).toBe(
         `aspect-ratio:1200 / 700`
       )
+      expect(await browser.elementById('raw1').getAttribute('height')).toBe(
+        '700'
+      )
+      expect(await browser.elementById('raw1').getAttribute('width')).toBe(
+        '1200'
+      )
       expect(await browser.elementById('raw1').getAttribute('srcset')).toBe(
         `/_next/image?url=%2Fwide.png&w=1200&q=75 1x, /_next/image?url=%2Fwide.png&w=3840&q=75 2x`
       )
 
       expect(await browser.elementById('raw2').getAttribute('style')).toBe(
         'padding-left:4rem;width:100%;object-position:30% 30%;aspect-ratio:1200 / 700'
       )
+      expect(
+        await browser.elementById('raw2').getAttribute('height')
+      ).toBeNull()
+      expect(await browser.elementById('raw2').getAttribute('width')).toBeNull()
       expect(await browser.elementById('raw2').getAttribute('srcset')).toBe(
         `/_next/image?url=%2Fwide.png&w=16&q=75 16w, /_next/image?url=%2Fwide.png&w=32&q=75 32w, /_next/image?url=%2Fwide.png&w=48&q=75 48w, /_next/image?url=%2Fwide.png&w=64&q=75 64w, /_next/image?url=%2Fwide.png&w=96&q=75 96w, /_next/image?url=%2Fwide.png&w=128&q=75 128w, /_next/image?url=%2Fwide.png&w=256&q=75 256w, /_next/image?url=%2Fwide.png&w=384&q=75 384w, /_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w`
       )