From db79cec0eba8bd11c19abdf8b28a49e1caa2bb37 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 5 Jan 2021 13:42:15 -0600 Subject: [PATCH 1/5] Add docs for custom image loaders. --- docs/api-reference/next/image.md | 31 +++++++++++++++++++++++ docs/basic-features/image-optimization.md | 4 ++- 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index dcca53f4db4ed..1676c475ab6da 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 image `loader` to resolve URLs. Defaults to `images` object in `next.config.js`. + +`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://customresolver.com/${src}?w~~${width},q~~${quality}` +} + +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 e3734f53db5cd..8ea1ae23b912f 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. From 364b2f4327d4513db1c05d8c09e665bdb95863c1 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 5 Jan 2021 13:58:31 -0600 Subject: [PATCH 2/5] Update docs/api-reference/next/image.md Co-authored-by: Steven --- docs/api-reference/next/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 1676c475ab6da..22a1746063f97 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -126,7 +126,7 @@ A custom image `loader` to resolve URLs. Defaults to `images` object in `next.co import Image from 'next/image' const myLoader = ({ src, width, quality }) => { - return `https://customresolver.com/${src}?w~~${width},q~~${quality}` + return `https://example.com/${src}?w=${width},q=${quality || 75}` } const MyImage = (props) => { From f3894814a091d3405ba3f2dfe8e251b3ed7fa135 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 5 Jan 2021 14:00:13 -0600 Subject: [PATCH 3/5] Add link back to loader docs. --- docs/api-reference/next/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 22a1746063f97..4f5b1b4f3b4df 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -114,7 +114,7 @@ Try it out: ### loader -A custom image `loader` to resolve URLs. Defaults to `images` object in `next.config.js`. +A custom image `loader` 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: From 3e970a61e11576a5eaf880a93f1f81372b0b3209 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 5 Jan 2021 16:06:52 -0600 Subject: [PATCH 4/5] Update docs/api-reference/next/image.md Co-authored-by: Steven --- docs/api-reference/next/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 4f5b1b4f3b4df..5217af52e7c5b 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -126,7 +126,7 @@ A custom image `loader` to resolve URLs. Defaults to [`images` object in `next.c import Image from 'next/image' const myLoader = ({ src, width, quality }) => { - return `https://example.com/${src}?w=${width},q=${quality || 75}` + return `https://example.com/${src}?w=${width}&q=${quality || 75}` } const MyImage = (props) => { From 050e0a7a6f59dc68394981731cd333cdd21f94ac Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Tue, 5 Jan 2021 16:06:59 -0600 Subject: [PATCH 5/5] Update docs/api-reference/next/image.md Co-authored-by: Steven --- docs/api-reference/next/image.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 5217af52e7c5b..e596719b242e8 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -114,7 +114,7 @@ Try it out: ### loader -A custom image `loader` to resolve URLs. Defaults to [`images` object in `next.config.js`](/docs/basic-features/image-optimization.md#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: