diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts index 0248cda18e..8f6ad37c69 100644 --- a/packages/next/src/shared/lib/get-img-props.ts +++ b/packages/next/src/shared/lib/get-img-props.ts @@ -400,9 +400,6 @@ export function getImgProps( // through the built-in Image Optimization API. unoptimized = true } - if (priority) { - fetchPriority = 'high' - } const qualityInt = getInt(quality) diff --git a/test/integration/next-image-new/app-dir/test/index.test.ts b/test/integration/next-image-new/app-dir/test/index.test.ts index 3e77d06eed..baa09158b5 100644 --- a/test/integration/next-image-new/app-dir/test/index.test.ts +++ b/test/integration/next-image-new/app-dir/test/index.test.ts @@ -143,7 +143,7 @@ function runTests(mode) { '/_next/image?url=%2Ftest.webp&w=640&q=75 1x, /_next/image?url=%2Ftest.webp&w=828&q=75 2x' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '', imagesrcset: '/_next/image?url=%2Ftest.webp&w=640&q=75 1x, /_next/image?url=%2Ftest.webp&w=828&q=75 2x', @@ -158,7 +158,7 @@ function runTests(mode) { '/_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' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '100vw', imagesrcset: '/_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', @@ -173,7 +173,7 @@ function runTests(mode) { '/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '', imagesrcset: '/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x', @@ -188,7 +188,7 @@ function runTests(mode) { '/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '', imagesrcset: '/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x', @@ -210,19 +210,19 @@ function runTests(mode) { await browser.elementById('responsive2').getAttribute('loading') ).toBe(null) - // When priority={true}, we should set fetchpriority="high" + // When priority={true}, we should not set fetchpriority="high" expect( await browser.elementById('basic-image').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) expect( await browser.elementById('load-eager').getAttribute('fetchpriority') ).toBe(null) expect( await browser.elementById('responsive1').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) expect( await browser.elementById('responsive2').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) // Setting fetchPriority="low" directly should pass-through to expect( @@ -234,7 +234,7 @@ function runTests(mode) { expect( await browser.elementById('belowthefold').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) expect( await browser.elementById('belowthefold').getAttribute('loading') ).toBe(null) @@ -860,7 +860,7 @@ function runTests(mode) { expect(await img.getAttribute('alt')).toBe('Hero') expect(await img.getAttribute('width')).toBe('400') expect(await img.getAttribute('height')).toBe('400') - expect(await img.getAttribute('fetchPriority')).toBe('high') + expect(await img.getAttribute('fetchPriority')).toBeNull() expect(await img.getAttribute('sizes')).toBeNull() expect(await img.getAttribute('src')).toBe( '/_next/image?url=%2Ftest_light.png&w=828&q=75' 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 a40c97d2cb..26b604c394 100644 --- a/test/integration/next-image-new/default/test/index.test.ts +++ b/test/integration/next-image-new/default/test/index.test.ts @@ -144,7 +144,7 @@ function runTests(mode) { '/_next/image?url=%2Ftest.webp&w=640&q=75 1x, /_next/image?url=%2Ftest.webp&w=828&q=75 2x' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '', imagesrcset: '/_next/image?url=%2Ftest.webp&w=640&q=75 1x, /_next/image?url=%2Ftest.webp&w=828&q=75 2x', @@ -159,7 +159,7 @@ function runTests(mode) { '/_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' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '100vw', imagesrcset: '/_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', @@ -174,7 +174,7 @@ function runTests(mode) { '/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '', imagesrcset: '/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x', @@ -189,7 +189,7 @@ function runTests(mode) { '/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x' ) ).toEqual({ - fetchpriority: 'high', + fetchpriority: '', imagesizes: '', imagesrcset: '/_next/image?url=%2Ftest.tiff&w=640&q=75 1x, /_next/image?url=%2Ftest.tiff&w=828&q=75 2x', @@ -211,19 +211,19 @@ function runTests(mode) { await browser.elementById('responsive2').getAttribute('loading') ).toBe(null) - // When priority={true}, we should set fetchpriority="high" + // When priority={true}, we not should set fetchpriority="high" expect( await browser.elementById('basic-image').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) expect( await browser.elementById('load-eager').getAttribute('fetchpriority') ).toBe(null) expect( await browser.elementById('responsive1').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) expect( await browser.elementById('responsive2').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) // Setting fetchPriority="low" directly should pass-through to expect( @@ -235,7 +235,7 @@ function runTests(mode) { expect( await browser.elementById('belowthefold').getAttribute('fetchpriority') - ).toBe('high') + ).toBe(null) expect( await browser.elementById('belowthefold').getAttribute('loading') ).toBe(null) @@ -861,7 +861,7 @@ function runTests(mode) { expect(await img.getAttribute('alt')).toBe('Hero') expect(await img.getAttribute('width')).toBe('400') expect(await img.getAttribute('height')).toBe('400') - expect(await img.getAttribute('fetchPriority')).toBe('high') + expect(await img.getAttribute('fetchPriority')).toBeNull() expect(await img.getAttribute('sizes')).toBeNull() expect(await img.getAttribute('src')).toBe( '/_next/image?url=%2Ftest_light.png&w=828&q=75' diff --git a/test/unit/next-image-get-img-props.test.ts b/test/unit/next-image-get-img-props.test.ts index e38150f788..d650cc8528 100644 --- a/test/unit/next-image-get-img-props.test.ts +++ b/test/unit/next-image-get-img-props.test.ts @@ -50,6 +50,31 @@ describe('getImageProps()', () => { expect(Object.entries(props)).toStrictEqual([ ['alt', 'a nice desc'], ['id', 'my-image'], + ['width', 100], + ['height', 200], + ['decoding', 'async'], + ['style', { color: 'transparent' }], + [ + 'srcSet', + '/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x', + ], + ['src', '/_next/image?url=%2Ftest.png&w=256&q=75'], + ]) + }) + it('should handle fetchPriority', async () => { + const { props } = getImageProps({ + alt: 'a nice desc', + id: 'my-image', + src: '/test.png', + width: 100, + height: 200, + fetchPriority: 'high', + }) + expect(warningMessages).toStrictEqual([]) + expect(Object.entries(props)).toStrictEqual([ + ['alt', 'a nice desc'], + ['id', 'my-image'], + ['loading', 'lazy'], ['fetchPriority', 'high'], ['width', 100], ['height', 200],