From 668a819e9e38c80af6954a8023cfc34e32690cb1 Mon Sep 17 00:00:00 2001 From: Joe Bell Date: Thu, 17 Jun 2021 09:08:50 +0300 Subject: [PATCH 1/3] docs: extend disclaimer for dynamic image imports --- docs/basic-features/image-optimization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md index ec9d2fd7f4ee7..5abc933d8ecd2 100644 --- a/docs/basic-features/image-optimization.md +++ b/docs/basic-features/image-optimization.md @@ -79,7 +79,7 @@ function Home() { } ``` -For dynamic images you have to provide `width`, `height` and `blurDataURL` manually. +For dynamic or remote images, you'll have to provide `width`, `height` and `blurDataURL` manually. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with this. ## Properties From 9c9d8bbf9fc3813e6701776a0aa2475027de6738 Mon Sep 17 00:00:00 2001 From: joe-bell Date: Thu, 17 Jun 2021 19:45:16 +0300 Subject: [PATCH 2/3] docs: extend guidance on blurDataURL --- docs/api-reference/next/image.md | 4 +++- docs/basic-features/image-optimization.md | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 4cf1ef52870a5..0a75cbcc57dc0 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -167,7 +167,9 @@ Should only be used when the image is visible above the fold. Defaults to A placeholder to use while the image is loading, possible values are `blur` or `empty`. Defaults to `empty`. -When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated. Otherwise you must provide the [`blurDataURL`](#blurdataurl) property. +When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated. + +For dynamic images, you must provide the [`blurDataURL`](#blurdataurl) property. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with base64 generation. When `empty`, there will be no placeholder while the image is loading, only empty space. diff --git a/docs/basic-features/image-optimization.md b/docs/basic-features/image-optimization.md index 5abc933d8ecd2..075b66d1b5e2c 100644 --- a/docs/basic-features/image-optimization.md +++ b/docs/basic-features/image-optimization.md @@ -79,7 +79,7 @@ function Home() { } ``` -For dynamic or remote images, you'll have to provide `width`, `height` and `blurDataURL` manually. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with this. +For dynamic or remote images, you'll have to provide [`width`](/docs/api-reference/next/image#width), [`height`](/docs/api-reference/next/image#height) and [`blurDataURL`](/docs/api-reference/next/image#blurdataurl) manually. ## Properties From 5ffc7d2ed68db050ac9c803857a224e2d0e1d119 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Fri, 18 Jun 2021 15:06:13 +0200 Subject: [PATCH 3/3] Update docs/api-reference/next/image.md --- 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 0a75cbcc57dc0..552902f76082a 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -169,7 +169,7 @@ A placeholder to use while the image is loading, possible values are `blur` or ` When `blur`, the [`blurDataURL`](#blurdataurl) property will be used as the placeholder. If `src` is an object from a static import and the imported image is jpg, png, or webp, then `blurDataURL` will automatically be populated. -For dynamic images, you must provide the [`blurDataURL`](#blurdataurl) property. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with base64 generation. +For dynamic images, you must provide the [`blurDataURL`](#blurdataurl) property. Solutions such as [Plaiceholder](https://github.com/joe-bell/plaiceholder) can help with `base64` generation. When `empty`, there will be no placeholder while the image is loading, only empty space.