diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index da4910cadd5a5..bced56ead3475 100644 --- 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 index ade349fe586c1..b0d3938d48081 100644 --- 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(