diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index dcca53f4db4ed0356a969ca0d40c2fb87b1f509d..e596719b242e8d5b3546c4943040af623839b3a4 100644 --- a/docs/api-reference/next/image.md +++ b/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 ( + Picture of the author + ) +} +``` + ### sizes A string mapping media queries to device sizes. Defaults to `100vw`. diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md index e3734f53db5cd6c72e935396935832e5dae5edaf..8ea1ae23b912f8422643d2a6eec70882f2abf56b 100644 --- a/docs/basic-features/image-optimization.md +++ b/docs/basic-features/image-optimization.md @@ -82,7 +82,7 @@ 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'` @@ -90,6 +90,8 @@ The following Image Optimization cloud providers are supported: - [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.