Add docs for custom image loaders. (#20788)

Docs for #20216.

docs/api-reference/next/image.md

@@ -16,6 +16,7 @@ description: Enable Image Optimization with the built-in Image component.
 
 | Version   | Changes                  |
 | --------- | ------------------------ |
+| `v10.0.5` | `loader` prop added.     |
 | `v10.0.1` | `layout` prop added.     |
 | `v10.0.0` | `next/image` introduced. |
 
@@ -111,6 +112,36 @@ Try it out:
 - [Demo the `fill` layout](https://image-component.nextjs.gallery/layout-fill)
 - [Demo background image](https://image-component.nextjs.gallery/background)
 
+### loader
+
+A custom function used to resolve URLs. Defaults to [`images` object in `next.config.js`](/docs/basic-features/image-optimization.md#loader).
+
+`loader` is a function returning a string, given the following parameters:
+
+- [`src`](#src)
+- [`width`](#width)
+- [`quality`](#quality)
+
+```js
+import Image from 'next/image'
+
+const myLoader = ({ src, width, quality }) => {
+  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
+}
+
+const MyImage = (props) => {
+  return (
+    <Image
+      loader={myLoader}
+      src="/me.png"
+      alt="Picture of the author"
+      width={500}
+      height={500}
+    />
+  )
+}
+```
+
 ### sizes
 
 A string mapping media queries to device sizes. Defaults to `100vw`.

docs/basic-features/image-optimization.md

@@ -82,14 +82,16 @@ module.exports = {
 }
 ```
 
-The following Image Optimization cloud providers are supported:
+The following Image Optimization cloud providers are included:
 
 - [Vercel](https://vercel.com): Works automatically when you deploy on Vercel, no configuration necessary. [Learn more](https://vercel.com/docs/next.js/image-optimization)
 - [Imgix](https://www.imgix.com): `loader: 'imgix'`
 - [Cloudinary](https://cloudinary.com): `loader: 'cloudinary'`
 - [Akamai](https://www.akamai.com): `loader: 'akamai'`
 - Default: Works automatically with `next dev`, `next start`, or a custom server
 
+If you need a different provider, you can use the [`loader`](/docs/api-reference/next/image.md#loader) prop with `next/image`.
+
 ## Caching
 
 The following describes the caching algorithm for the default [loader](#loader). For all other loaders, please refer to your cloud provider's documentation.