Change data-nimg attribute on next/image (vercel#41612)

For `next/legacy/image`, the `data-nimg` has the `layout` prop value. Since `next/image` doesn't have a `layout` prop, we can use `fill` when the fill prop is used or fallback to `1`.
shuding · Oct 23, 2022 · 9ff399d · 9ff399d
1 parent 65ae857
commit 9ff399d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -299,7 +299,7 @@ function handleLoading(
       onLoadingCompleteRef.current(img)
     }
     if (process.env.NODE_ENV !== 'production') {
-      if (img.getAttribute('data-nimg') === 'future-fill') {
+      if (img.getAttribute('data-nimg') === 'fill') {
         if (
           !img.getAttribute('sizes') ||
           img.getAttribute('sizes') === '100vw'
@@ -378,7 +378,7 @@ const ImageElement = ({
         width={widthInt}
         height={heightInt}
         decoding="async"
-        data-nimg={`future${fill ? '-fill' : ''}`}
+        data-nimg={fill ? 'fill' : '1'}
         className={className}
         // @ts-ignore - TODO: upgrade to `@types/react@17`
         loading={loading}

diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
@@ -272,7 +272,7 @@ function runTests(mode) {
         browser.eval(
           `document.getElementById("img8").getAttribute("data-nimg")`
         ),
-      'future'
+      '1'
     )
     await check(
       () => browser.eval(`document.getElementById("img8").currentSrc`),
@@ -288,7 +288,7 @@ function runTests(mode) {
         browser.eval(
           `document.getElementById("img8").getAttribute("data-nimg")`
         ),
-      'future'
+      '1'
     )
     await check(
       () => browser.eval(`document.getElementById("img8").currentSrc`),
@@ -336,7 +336,7 @@ function runTests(mode) {
         browser.eval(
           `document.getElementById("img5").getAttribute("data-nimg")`
         ),
-      'future'
+      '1'
     )
 
     await browser.eval('document.getElementById("toggle").click()')
@@ -1047,7 +1047,7 @@ function runTests(mode) {
     it('should include a data-attribute on fill images', async () => {
       expect(
         await browser.elementById('fill-image-1').getAttribute('data-nimg')
-      ).toBe('future-fill')
+      ).toBe('fill')
     })
     it('should add position:absolute to fill images', async () => {
       expect(await getComputedStyle(browser, 'fill-image-1', 'position')).toBe(