Support for custom image loaders via image component prop

packages/next/client/image.tsx

@@ -38,6 +38,7 @@ export type ImageProps = Omit<
   'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'
 > & {
   src: string
+  loader?: URLResolver
   quality?: number | string
   priority?: boolean
   loading?: LoadingValue
@@ -59,14 +60,15 @@ export type ImageProps = Omit<
       }
   )
 
+const config =
+  ((process.env.__NEXT_IMAGE_OPTS as any) as ImageConfig) || imageConfigDefault
+const configLoader = config.loader || 'default'
 const {
   deviceSizes: configDeviceSizes,
   imageSizes: configImageSizes,
-  loader: configLoader,
   path: configPath,
   domains: configDomains,
-} =
-  ((process.env.__NEXT_IMAGE_OPTS as any) as ImageConfig) || imageConfigDefault
+} = config
 // sort smallest to largest
 const allSizes = [...configDeviceSizes, ...configImageSizes]
 configDeviceSizes.sort((a, b) => a - b)
@@ -99,8 +101,12 @@ type CallLoaderProps = {
   width: number
   quality?: number
 }
+type URLResolver = (resolverProps: CallLoaderProps) => string
 
-function callLoader(loaderProps: CallLoaderProps) {
+function callLoader(loaderProps: CallLoaderProps, loader?: URLResolver) {
+  if (loader) {
+    return loader(loaderProps)
+  }
   const load = loaders.get(configLoader)
   if (load) {
     return load({ root: configPath, ...loaderProps })
@@ -119,6 +125,7 @@ type GenImgAttrsData = {
   width?: number
   quality?: number
   sizes?: string
+  loader?: URLResolver
 }
 
 type GenImgAttrsResult = Pick<
@@ -133,6 +140,7 @@ function generateImgAttrs({
   width,
   quality,
   sizes,
+  loader,
 }: GenImgAttrsData): GenImgAttrsResult {
   if (unoptimized) {
     return { src }
@@ -144,7 +152,7 @@ function generateImgAttrs({
   const srcSet = widths
     .map(
       (w, i) =>
-        `${callLoader({ src, quality, width: w })} ${
+        `${callLoader({ src, quality, width: w }, loader)} ${
           kind === 'w' ? w : i + 1
         }${kind}`
     )
@@ -154,7 +162,7 @@ function generateImgAttrs({
     sizes = '100vw'
   }
 
-  src = callLoader({ src, quality, width: widths[last] })
+  src = callLoader({ src, quality, width: widths[last] }, loader)
 
   return { src, sizes, srcSet }
 }
@@ -181,6 +189,7 @@ export default function Image({
   height,
   objectFit,
   objectPosition,
+  loader,
   ...all
 }: ImageProps) {
   let rest: Partial<ImageProps> = all
@@ -365,6 +374,7 @@ export default function Image({
       width: widthInt,
       quality: qualityInt,
       sizes,
+      loader,
     })
   }
 

test/integration/image-component/custom-resolver/next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  images: {
+    deviceSizes: [480, 1024, 1600, 2000],
+    imageSizes: [16, 32, 48, 64],
+    path: 'https://globalresolver.com/myaccount/',
+    loader: 'imgix',
+  },
+}

test/integration/image-component/custom-resolver/pages/client-side.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import Image from 'next/image'
+
+const myLoader = ({ src, width, quality }) => {
+  return `https://customresolver.com/${src}?w~~${width},q~~${quality}`
+}
+
+const MyImage = (props) => {
+  return <Image loader={myLoader} {...props}></Image>
+}
+
+const Page = () => {
+  return (
+    <div>
+      <p>Image Client Side Test</p>
+      <MyImage
+        id="basic-image"
+        src="foo.jpg"
+        loading="eager"
+        width={300}
+        height={400}
+        quality={60}
+      />
+      <Image
+        id="unoptimized-image"
+        unoptimized
+        src="https://arbitraryurl.com/foo.jpg"
+        loading="eager"
+        width={300}
+        height={400}
+      />
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/custom-resolver/pages/index.js

@@ -0,0 +1,40 @@
+import React from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+
+const myLoader = ({ src, width, quality }) => {
+  return `https://customresolver.com/${src}?w~~${width},q~~${quality}`
+}
+
+const MyImage = (props) => {
+  return <Image loader={myLoader} {...props}></Image>
+}
+
+const Page = () => {
+  return (
+    <div>
+      <p>Image SSR Test</p>
+      <MyImage
+        id="basic-image"
+        src="foo.jpg"
+        loading="eager"
+        width={300}
+        height={400}
+        quality={60}
+      />
+      <Image
+        id="unoptimized-image"
+        unoptimized
+        src="https://arbitraryurl.com/foo.jpg"
+        loading="eager"
+        width={300}
+        height={400}
+      />
+      <Link href="/client-side">
+        <a id="clientlink">Client Side</a>
+      </Link>
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/custom-resolver/test/index.test.js

@@ -0,0 +1,60 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { killApp, findPort, nextStart, nextBuild } from 'next-test-utils'
+import webdriver from 'next-webdriver'
+
+jest.setTimeout(1000 * 30)
+
+const appDir = join(__dirname, '../')
+let appPort
+let app
+let browser
+
+function runTests() {
+  it('Should use a custom resolver for image URL', async () => {
+    expect(await browser.elementById('basic-image').getAttribute('src')).toBe(
+      'https://customresolver.com/foo.jpg?w~~1024,q~~60'
+    )
+  })
+  it('should add a srcset based on the custom resolver', async () => {
+    expect(
+      await browser.elementById('basic-image').getAttribute('srcset')
+    ).toBe(
+      'https://customresolver.com/foo.jpg?w~~480,q~~60 1x, https://customresolver.com/foo.jpg?w~~1024,q~~60 2x'
+    )
+  })
+  it('should support the unoptimized attribute', async () => {
+    expect(
+      await browser.elementById('unoptimized-image').getAttribute('src')
+    ).toBe('https://arbitraryurl.com/foo.jpg')
+  })
+}
+
+describe('Custom Resolver Tests', () => {
+  beforeAll(async () => {
+    await nextBuild(appDir)
+    appPort = await findPort()
+    app = await nextStart(appDir, appPort)
+  })
+  afterAll(() => killApp(app))
+  describe('SSR Custom Loader Tests', () => {
+    beforeAll(async () => {
+      browser = await webdriver(appPort, '/')
+    })
+    afterAll(async () => {
+      browser = null
+    })
+    runTests()
+  })
+  describe('Client-side Custom Loader Tests', () => {
+    beforeAll(async () => {
+      browser = await webdriver(appPort, '/')
+      await browser.waitForElementByCss('#clientlink').click()
+    })
+    afterAll(async () => {
+      browser = null
+    })
+    runTests()
+  })
+})