Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit a12eeea

Browse files
styflestyfle
authored
Add w param (vercel#18151)
Add missing `w` param for [old browsers](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset#Browser_compatibility) like IE that dont support `srcset` (@styfle)
1 parent 1925ca0 commit a12eeea

File tree

2 files changed

+20
-24
lines changed

2 files changed

+20
-24
lines changed

‎packages/next/client/image.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ type ImageProps = Omit<
3535

3636
const imageData: ImageData = process.env.__NEXT_IMAGE_OPTS as any
3737
const { sizes: configSizes, loader: configLoader, path: configPath } = imageData
38+
configSizes.sort((a, b) => a - b) // smallest to largest
39+
const largestSize = configSizes[configSizes.length - 1]
3840

3941
let cachedObserver: IntersectionObserver
4042
const IntersectionObserver =
@@ -79,17 +81,17 @@ function computeSrc(
7981
if (unoptimized) {
8082
return src
8183
}
82-
return callLoader({ src, quality })
84+
return callLoader({ src, width: largestSize, quality })
8385
}
8486

8587
type CallLoaderProps = {
8688
src: string
87-
width?: number
89+
width: number
8890
quality?: string
8991
}
9092

9193
function callLoader(loaderProps: CallLoaderProps) {
92-
let load = loaders.get(configLoader) || defaultLoader
94+
const load = loaders.get(configLoader) || defaultLoader
9395
return load({ root: configPath, ...loaderProps })
9496
}
9597

@@ -310,11 +312,8 @@ function normalizeSrc(src: string) {
310312
}
311313

312314
function imgixLoader({ root, src, width, quality }: LoaderProps): string {
313-
const params = ['auto=format']
315+
const params = ['auto=format', 'w=' + width]
314316
let paramsString = ''
315-
if (width) {
316-
params.push('w=' + width)
317-
}
318317
if (quality) {
319318
params.push('q=' + quality)
320319
}
@@ -326,15 +325,12 @@ function imgixLoader({ root, src, width, quality }: LoaderProps): string {
326325
}
327326

328327
function akamaiLoader({ root, src, width }: LoaderProps): string {
329-
return `${root}${normalizeSrc(src)}${width ? '?imwidth=' + width : ''}`
328+
return `${root}${normalizeSrc(src)}?imwidth=${width}`
330329
}
331330

332331
function cloudinaryLoader({ root, src, width, quality }: LoaderProps): string {
333-
const params = ['f_auto']
332+
const params = ['f_auto', 'w_' + width]
334333
let paramsString = ''
335-
if (width) {
336-
params.push('w_' + width)
337-
}
338334
if (quality) {
339335
params.push('q_' + quality)
340336
}
@@ -345,7 +341,7 @@ function cloudinaryLoader({ root, src, width, quality }: LoaderProps): string {
345341
}
346342

347343
function defaultLoader({ root, src, width, quality }: LoaderProps): string {
348-
return `${root}?url=${encodeURIComponent(src)}&${
349-
width ? `w=${width}&` : ''
350-
}q=${quality || '100'}`
344+
return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${
345+
quality || '100'
346+
}`
351347
}

‎test/integration/image-component/basic/test/index.test.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ function runTests() {
3333
})
3434
it('should modify src with the loader', async () => {
3535
expect(await browser.elementById('basic-image').getAttribute('src')).toBe(
36-
'https://example.com/myaccount/foo.jpg?auto=format&q=60'
36+
'https://example.com/myaccount/foo.jpg?auto=format&w=1600&q=60'
3737
)
3838
})
3939
it('should correctly generate src even if preceding slash is included in prop', async () => {
4040
expect(
4141
await browser.elementById('preceding-slash-image').getAttribute('src')
42-
).toBe('https://example.com/myaccount/fooslash.jpg?auto=format')
42+
).toBe('https://example.com/myaccount/fooslash.jpg?auto=format&w=1600')
4343
})
4444
it('should add a srcset based on the loader', async () => {
4545
expect(
@@ -70,7 +70,7 @@ function runTests() {
7070
function lazyLoadingTests() {
7171
it('should have loaded the first image immediately', async () => {
7272
expect(await browser.elementById('lazy-top').getAttribute('src')).toBe(
73-
'https://example.com/myaccount/foo1.jpg?auto=format'
73+
'https://example.com/myaccount/foo1.jpg?auto=format&w=1600'
7474
)
7575
expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(
7676
'https://example.com/myaccount/foo1.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo1.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/foo1.jpg?auto=format&w=1600 1600w'
@@ -101,7 +101,7 @@ function lazyLoadingTests() {
101101

102102
await check(() => {
103103
return browser.elementById('lazy-mid').getAttribute('src')
104-
}, 'https://example.com/myaccount/foo2.jpg?auto=format')
104+
}, 'https://example.com/myaccount/foo2.jpg?auto=format&w=1600')
105105

106106
await check(() => {
107107
return browser.elementById('lazy-mid').getAttribute('srcset')
@@ -150,15 +150,15 @@ function lazyLoadingTests() {
150150
await waitFor(200)
151151
expect(
152152
await browser.elementById('lazy-without-attribute').getAttribute('src')
153-
).toBe('https://example.com/myaccount/foo4.jpg?auto=format')
153+
).toBe('https://example.com/myaccount/foo4.jpg?auto=format&w=1600')
154154
expect(
155155
await browser.elementById('lazy-without-attribute').getAttribute('srcset')
156156
).toBeTruthy()
157157
})
158158

159159
it('should load the fifth image eagerly, without scrolling', async () => {
160160
expect(await browser.elementById('eager-loading').getAttribute('src')).toBe(
161-
'https://example.com/myaccount/foo5.jpg?auto=format'
161+
'https://example.com/myaccount/foo5.jpg?auto=format&w=1600'
162162
)
163163
expect(
164164
await browser.elementById('eager-loading').getAttribute('srcset')
@@ -198,14 +198,14 @@ describe('Image Component Tests', () => {
198198
it('should add a preload tag for a priority image', async () => {
199199
expect(
200200
await hasPreloadLinkMatchingUrl(
201-
'https://example.com/myaccount/withpriority.png?auto=format'
201+
'https://example.com/myaccount/withpriority.png?auto=format&w=1600'
202202
)
203203
).toBe(true)
204204
})
205205
it('should add a preload tag for a priority image with preceding slash', async () => {
206206
expect(
207207
await hasPreloadLinkMatchingUrl(
208-
'https://example.com/myaccount/fooslash.jpg?auto=format'
208+
'https://example.com/myaccount/fooslash.jpg?auto=format&w=1600'
209209
)
210210
).toBe(true)
211211
})
@@ -219,7 +219,7 @@ describe('Image Component Tests', () => {
219219
it('should add a preload tag for a priority image, with quality', async () => {
220220
expect(
221221
await hasPreloadLinkMatchingUrl(
222-
'https://example.com/myaccount/withpriority.png?auto=format&q=60'
222+
'https://example.com/myaccount/withpriority.png?auto=format&w=1600&q=60'
223223
)
224224
).toBe(true)
225225
})

0 commit comments

Comments
 (0)