From 4e75cdabb795db7de0708c48e2a0908f7049e322 Mon Sep 17 00:00:00 2001 From: Joe Bell Date: Fri, 18 Jun 2021 17:21:12 +0300 Subject: [PATCH] Extend disclaimer for dynamic image imports (#26241) * docs: extend disclaimer for dynamic image imports * docs: extend guidance on blurDataURL * Update docs/api-reference/next/image.md Co-authored-by: Steven Co-authored-by: Tim Neutkens --- 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..552902f76082a 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 ec9d2fd7f4ee7..075b66d1b5e2c 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`](/docs/api-reference/next/image#width), [`height`](/docs/api-reference/next/image#height) and [`blurDataURL`](/docs/api-reference/next/image#blurdataurl) manually. ## Properties