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],