Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Extend disclaimer for dynamic image imports #26241

Merged
merged 7 commits into from
Jun 18, 2021
Merged

Extend disclaimer for dynamic image imports #26241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
668a819
docs: extend disclaimer for dynamic image imports
joe-bell Jun 17, 2021
14cd201
Merge branch 'canary' into patch-1
joe-bell Jun 17, 2021
9c9d8bb
docs: extend guidance on blurDataURL
joe-bell Jun 17, 2021
a186fbd
Merge branch 'canary' into patch-1
joe-bell Jun 17, 2021
59c6bf2
Merge branch 'canary' into patch-1
joe-bell Jun 17, 2021
4a9dc65
Merge branch 'canary' into patch-1
styfle Jun 18, 2021
5ffc7d2
Update docs/api-reference/next/image.md
timneutkens Jun 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/api-reference/next/image.md
View file
Open in desktop
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
View file
Open in desktop
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