Support for custom image loaders via image component prop

packages/next/client/image.tsx

@@ -15,7 +15,20 @@ if (typeof window === 'undefined') {
 const VALID_LOADING_VALUES = ['lazy', 'eager', undefined] as const
 type LoadingValue = typeof VALID_LOADING_VALUES[number]
 
-const loaders = new Map<LoaderValue, (props: LoaderProps) => string>([
+export type ImageLoader = (resolverProps: ImageLoaderProps) => string
+
+type ImageLoaderProps = {
+  src: string
+  width: number
+  quality?: number
+}
+
+type DefaultImageLoaderProps = ImageLoaderProps & { root: string }
+
+const loaders = new Map<
+  LoaderValue,
+  (props: DefaultImageLoaderProps) => string
+>([
   ['imgix', imgixLoader],
   ['cloudinary', cloudinaryLoader],
   ['akamai', akamaiLoader],
@@ -38,6 +51,7 @@ export type ImageProps = Omit<
   'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading' | 'style'
 > & {
   src: string
+  loader?: ImageLoader | string
   quality?: number | string
   priority?: boolean
   loading?: LoadingValue
@@ -59,14 +73,15 @@ export type ImageProps = Omit<
       }
   )
 
+const config =
+  ((process.env.__NEXT_IMAGE_OPTS as any) as ImageConfig) || imageConfigDefault
+const configLoader = config.loader
 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)
@@ -94,28 +109,11 @@ function getWidths(
   return { widths, kind: 'x' }
 }
 
-type CallLoaderProps = {
-  src: string
-  width: number
-  quality?: number
-}
-
-function callLoader(loaderProps: CallLoaderProps) {
-  const load = loaders.get(configLoader)
-  if (load) {
-    return load({ root: configPath, ...loaderProps })
-  }
-  throw new Error(
-    `Unknown "loader" found in "next.config.js". Expected: ${VALID_LOADERS.join(
-      ', '
-    )}. Received: ${configLoader}`
-  )
-}
-
 type GenImgAttrsData = {
   src: string
   unoptimized: boolean
   layout: LayoutValue
+  loader: ImageLoader
   width?: number
   quality?: number
   sizes?: string
@@ -133,6 +131,7 @@ function generateImgAttrs({
   width,
   quality,
   sizes,
+  loader,
 }: GenImgAttrsData): GenImgAttrsResult {
   if (unoptimized) {
     return { src }
@@ -141,22 +140,18 @@ function generateImgAttrs({
   const { widths, kind } = getWidths(width, layout)
   const last = widths.length - 1
 
-  const srcSet = widths
-    .map(
-      (w, i) =>
-        `${callLoader({ src, quality, width: w })} ${
-          kind === 'w' ? w : i + 1
-        }${kind}`
-    )
-    .join(', ')
-
-  if (!sizes && kind === 'w') {
-    sizes = '100vw'
+  return {
+    src: loader({ src, quality, width: widths[last] }),
+    sizes: !sizes && kind === 'w' ? '100vw' : sizes,
+    srcSet: widths
+      .map(
+        (w, i) =>
+          `${loader({ src, quality, width: w })} ${
+            kind === 'w' ? w : i + 1
+          }${kind}`
+      )
+      .join(', '),
   }
-
-  src = callLoader({ src, quality, width: widths[last] })
-
-  return { src, sizes, srcSet }
 }
 
 function getInt(x: unknown): number | undefined {
@@ -169,6 +164,19 @@ function getInt(x: unknown): number | undefined {
   return undefined
 }
 
+function defaultImageLoader(loaderProps: ImageLoaderProps) {
+  const load = loaders.get(configLoader)
+  if (!load) {
+    throw new Error(
+      `Unknown "loader" found in "next.config.js". Expected: ${VALID_LOADERS.join(
+        ', '
+      )}. Received: ${configLoader}`
+    )
+  }
+
+  return load({ root: configPath, ...loaderProps })
+}
+
 export default function Image({
   src,
   sizes,
@@ -181,6 +189,7 @@ export default function Image({
   height,
   objectFit,
   objectPosition,
+  loader = defaultImageLoader,
   ...all
 }: ImageProps) {
   let rest: Partial<ImageProps> = all
@@ -197,6 +206,20 @@ export default function Image({
     // Remove property so it's not spread into image:
     delete rest['layout']
   }
+  // Handle string specifying a different built-in loader
+  if (typeof loader === 'string') {
+    if (!(VALID_LOADERS as ReadonlyArray<string>).includes(loader)) {
+      throw new Error(
+        `Unknown "loader" specified as a parameter. Expected a function or one of the following: ${VALID_LOADERS.join(
+          ', '
+        )}. Received: ${configLoader}`
+      )
+    }
+    const load = loaders.get(loader as LoaderValue) as (
+      props: DefaultImageLoaderProps
+    ) => string
+    loader = (props: ImageLoaderProps) => load({ root: configPath, ...props })
+  }
 
   if (process.env.NODE_ENV !== 'production') {
     if (!src) {
@@ -365,6 +388,7 @@ export default function Image({
       width: widthInt,
       quality: qualityInt,
       sizes,
+      loader,
     })
   }
 
@@ -402,13 +426,16 @@ export default function Image({
 
 //BUILT IN LOADERS
 
-type LoaderProps = CallLoaderProps & { root: string }
-
 function normalizeSrc(src: string) {
   return src[0] === '/' ? src.slice(1) : src
 }
 
-function imgixLoader({ root, src, width, quality }: LoaderProps): string {
+function imgixLoader({
+  root,
+  src,
+  width,
+  quality,
+}: DefaultImageLoaderProps): string {
   // Demo: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300
   const params = ['auto=format', 'fit=max', 'w=' + width]
   let paramsString = ''
@@ -422,18 +449,28 @@ function imgixLoader({ root, src, width, quality }: LoaderProps): string {
   return `${root}${normalizeSrc(src)}${paramsString}`
 }
 
-function akamaiLoader({ root, src, width }: LoaderProps): string {
+function akamaiLoader({ root, src, width }: DefaultImageLoaderProps): string {
   return `${root}${normalizeSrc(src)}?imwidth=${width}`
 }
 
-function cloudinaryLoader({ root, src, width, quality }: LoaderProps): string {
+function cloudinaryLoader({
+  root,
+  src,
+  width,
+  quality,
+}: DefaultImageLoaderProps): string {
   // Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
   const params = ['f_auto', 'c_limit', 'w_' + width, 'q_' + (quality || 'auto')]
   let paramsString = params.join(',') + '/'
   return `${root}${paramsString}${normalizeSrc(src)}`
 }
 
-function defaultLoader({ root, src, width, quality }: LoaderProps): string {
+function defaultLoader({
+  root,
+  src,
+  width,
+  quality,
+}: DefaultImageLoaderProps): string {
   if (process.env.NODE_ENV !== 'production') {
     const missingValues = []
 

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,45 @@
+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="different-default-image"
+        src="foo.jpg"
+        loading="eager"
+        loader="cloudinary"
+        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,49 @@
+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="different-default-image"
+        src="foo.jpg"
+        loading="eager"
+        loader="cloudinary"
+        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