Fix tests and fallback image

Author: styfle

packages/next/client/image.tsx

@@ -42,7 +42,6 @@ const {
   domains: configDomains,
 } = imageData
 configSizes.sort((a, b) => a - b) // smallest to largest
-const largestSize = configSizes[configSizes.length - 1]
 
 let cachedObserver: IntersectionObserver
 const IntersectionObserver =
@@ -83,12 +82,21 @@ function getObserver(): IntersectionObserver | undefined {
 function computeSrc(
   src: string,
   unoptimized: boolean,
+  width: number | undefined,
   quality?: string
 ): string {
   if (unoptimized) {
     return src
   }
-  return callLoader({ src, width: largestSize, quality })
+  let widths = configSizes
+  if (typeof width === 'number') {
+    widths = configSizes.filter((size) => size <= width)
+    if (widths.length === 0) {
+      widths = [configSizes[0]]
+    }
+  }
+  const largest = widths[widths.length - 1]
+  return callLoader({ src, width: largest, quality })
 }
 
 type CallLoaderProps = {
@@ -156,7 +164,7 @@ function generatePreload({
       <link
         rel="preload"
         as="image"
-        href={computeSrc(src, unoptimized, quality)}
+        href={computeSrc(src, unoptimized, width, quality)}
         // @ts-ignore: imagesrcset and imagesizes not yet in the link element type
         imagesrcset={generateSrcSet({ src, unoptimized, width, quality })}
         imagesizes={sizes}
@@ -287,7 +295,7 @@ export default function Image({
   }
 
   // Generate attribute values
-  const imgSrc = computeSrc(src, unoptimized, quality)
+  const imgSrc = computeSrc(src, unoptimized, widthInt, quality)
   const imgSrcSet = generateSrcSet({
     src,
     width: widthInt,

test/integration/image-component/basic/next.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   images: {
-    sizes: [480, 1024, 1600],
+    sizes: [480, 1024, 1600, 2000],
     path: 'https://example.com/myaccount/',
     loader: 'imgix',
   },

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

@@ -39,7 +39,6 @@ const Page = () => {
         width={300}
         height={400}
       />
-      <Image id="priority-image" priority src="withpriority.png" />
       <Image
         id="priority-image"
         priority

test/integration/image-component/basic/pages/lazy.js

@@ -35,15 +35,15 @@ const Lazy = () => {
         id="lazy-without-attribute"
         src="foo4.jpg"
         height={400}
-        width={300}
+        width={1500}
       ></Image>
       <div style={{ height: '2000px' }}></div>
       <Image
         id="eager-loading"
         src="foo5.jpg"
         loading="eager"
         height={400}
-        width={300}
+        width={2500}
       ></Image>
     </div>
   )

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

@@ -33,13 +33,13 @@ function runTests() {
   })
   it('should modify src with the loader', async () => {
     expect(await browser.elementById('basic-image').getAttribute('src')).toBe(
-      'https://example.com/myaccount/foo.jpg?auto=format&w=1600&q=60'
+      'https://example.com/myaccount/foo.jpg?auto=format&w=480&q=60'
     )
   })
   it('should correctly generate src even if preceding slash is included in prop', async () => {
     expect(
       await browser.elementById('preceding-slash-image').getAttribute('src')
-    ).toBe('https://example.com/myaccount/fooslash.jpg?auto=format&w=1600')
+    ).toBe('https://example.com/myaccount/fooslash.jpg?auto=format&w=480')
   })
   it('should add a srcset based on the loader', async () => {
     expect(
@@ -49,9 +49,7 @@ function runTests() {
   it('should add a srcset even with preceding slash in prop', async () => {
     expect(
       await browser.elementById('preceding-slash-image').getAttribute('srcset')
-    ).toBe(
-      'https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w'
-    )
+    ).toBe('https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w')
   })
   it('should support the unoptimized attribute', async () => {
     expect(
@@ -68,7 +66,7 @@ function runTests() {
 function lazyLoadingTests() {
   it('should have loaded the first image immediately', async () => {
     expect(await browser.elementById('lazy-top').getAttribute('src')).toBe(
-      'https://example.com/myaccount/foo1.jpg?auto=format&w=1600'
+      'https://example.com/myaccount/foo1.jpg?auto=format&w=1024'
     )
     expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(
       'https://example.com/myaccount/foo1.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo1.jpg?auto=format&w=1024 1024w'
@@ -99,7 +97,7 @@ function lazyLoadingTests() {
 
     await check(() => {
       return browser.elementById('lazy-mid').getAttribute('src')
-    }, 'https://example.com/myaccount/foo2.jpg?auto=format&w=1600')
+    }, 'https://example.com/myaccount/foo2.jpg?auto=format&w=480')
 
     await check(() => {
       return browser.elementById('lazy-mid').getAttribute('srcset')
@@ -148,17 +146,17 @@ function lazyLoadingTests() {
     await waitFor(200)
     expect(
       await browser.elementById('lazy-without-attribute').getAttribute('src')
-    ).toBe('https://example.com/myaccount/foo4.jpg?auto=format&w=1600')
+    ).toBe('https://example.com/myaccount/foo4.jpg?auto=format&w=1024')
     expect(
       await browser.elementById('lazy-without-attribute').getAttribute('srcset')
     ).toBe(
-      'https://example.com/myaccount/foo4.jpg?auto=format&w=480&q=60 480w, https://example.com/myaccount/foo4.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo4.jpg?auto=format&w=1600&q=60 1600w'
+      'https://example.com/myaccount/foo4.jpg?auto=format&w=480 480w, https://example.com/myaccount/foo4.jpg?auto=format&w=1024 1024w'
     )
   })
 
   it('should load the fifth image eagerly, without scrolling', async () => {
     expect(await browser.elementById('eager-loading').getAttribute('src')).toBe(
-      'https://example.com/myaccount/foo5.jpg?auto=format&w=1600'
+      'https://example.com/myaccount/foo5.jpg?auto=format&w=2000'
     )
     expect(
       await browser.elementById('eager-loading').getAttribute('srcset')
@@ -198,14 +196,14 @@ describe('Image Component Tests', () => {
     it('should add a preload tag for a priority image', async () => {
       expect(
         await hasPreloadLinkMatchingUrl(
-          'https://example.com/myaccount/withpriority.png?auto=format&w=1600'
+          'https://example.com/myaccount/withpriority.png?auto=format&w=480&q=60'
         )
       ).toBe(true)
     })
     it('should add a preload tag for a priority image with preceding slash', async () => {
       expect(
         await hasPreloadLinkMatchingUrl(
-          'https://example.com/myaccount/fooslash.jpg?auto=format&w=1600'
+          'https://example.com/myaccount/fooslash.jpg?auto=format&w=480'
         )
       ).toBe(true)
     })
@@ -219,7 +217,7 @@ describe('Image Component Tests', () => {
     it('should add a preload tag for a priority image, with quality', async () => {
       expect(
         await hasPreloadLinkMatchingUrl(
-          'https://example.com/myaccount/withpriority.png?auto=format&w=1600&q=60'
+          'https://example.com/myaccount/withpriority.png?auto=format&w=480&q=60'
         )
       ).toBe(true)
     })