Skip to content
This repository has been archived by the owner on Jun 21, 2023. It is now read-only.

Commit

Permalink
Extend disclaimer for dynamic image imports (vercel#26241)
Browse files Browse the repository at this point in the history
* docs: extend disclaimer for dynamic image imports

* docs: extend guidance on blurDataURL

* Update docs/api-reference/next/image.md

Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
  • Loading branch information
3 people committed Jun 18, 2021
1 parent 81f99a9 commit 4e75cda
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 2 deletions.
4 changes: 3 additions & 1 deletion docs/api-reference/next/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion docs/basic-features/image-optimization.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 4e75cda

Please sign in to comment.