Skip to content

Commit

Permalink
lint-fix
Browse files Browse the repository at this point in the history
  • Loading branch information
ijjk committed Jun 15, 2021
1 parent 2436f3c commit 7cae558
Showing 1 changed file with 13 additions and 14 deletions.
27 changes: 13 additions & 14 deletions docs/api-reference/next/image.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ description: Enable Image Optimization with the built-in Image component.
<details>
<summary><b>Version History</b></summary>

| Version | Changes |
| --------- | ------------------------------------------------ |
| `v11.0.0` | Added static imports for `src`. Added `placeholder` and `blurDataURL` props. |
| `v10.0.5` | `loader` prop added. |
| `v10.0.1` | `layout` prop added. |
| `v10.0.0` | `next/image` introduced. |
| Version | Changes |
| --------- | ---------------------------------------------------------------------------- |
| `v11.0.0` | Added static imports for `src`. Added `placeholder` and `blurDataURL` props. |
| `v10.0.5` | `loader` prop added. |
| `v10.0.1` | `layout` prop added. |
| `v10.0.0` | `next/image` introduced. |

</details>

Expand All @@ -46,10 +46,7 @@ function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src={profilePic}
alt="Picture of the author"
/>
<Image src={profilePic} alt="Picture of the author" />
<p>Welcome to my homepage!</p>
</>
)
Expand All @@ -65,9 +62,10 @@ The `<Image />` component requires the following properties.
### src

Required and must be one of the following:

1. A statically imported image file, as in the example code above, or
2. A path string. This can be either an absolute external URL,
or an internal path depending on the [loader](#loader).
or an internal path depending on the [loader](#loader).

When using an external URL, you must add it to
[domains](/docs/basic-features/image-optimization.md#domains) in
Expand Down Expand Up @@ -166,6 +164,7 @@ Should only be used when the image is visible above the fold. Defaults to
`false`.

### placeholder

A placeholder to use while the image is loading, possible values are `blur` or `empty`. Defaults to `empty`.
When `placeholder="blur"`, the `blurDataURL` will be used as the placeholder. If the `src` is an object from a static import, then `blurDataURL` will automatically be populated. If the `src` is a string, then you must provide the [`blurDataURL` property](#blurdataurl).

Expand Down Expand Up @@ -205,9 +204,9 @@ When `eager`, load the image immediately.

### blurDataURL

A [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to
be used as a placeholder image before the `src` image successfully loads. Only takes effect when combined
with [`placeholder="blur"`](#placeholder).
A [Data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) to
be used as a placeholder image before the `src` image successfully loads. Only takes effect when combined
with [`placeholder="blur"`](#placeholder).

Must be a base64-encoded image. It will be enlarged and blurred, so a very small image (10px or
less) is recommended. Including larger images as placeholders may harm your application performance.
Expand Down

0 comments on commit 7cae558

Please sign in to comment.