-
Notifications
You must be signed in to change notification settings - Fork 26.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add errors for invalid
placeholder=blur
usage (#25953)
There are strict conditions for using `placeholder=blur` documented in #25949 but this will give the user a better understanding during `next dev` and links to the error. - Error when `placeholder=blur` and no `blurDataURL` - The Error for small images with `placeholder=blur` has been changed to a warning - Added support for blurring a webp image - Added error page linking to relevant docs
- Loading branch information
Showing
11 changed files
with
146 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
# `placeholder=blur` without `blurDataURL` | ||
|
||
#### Why This Error Occurred | ||
|
||
You are attempting use the `next/image` component with `placeholder=blur` property but no `blurDataURL` property. | ||
|
||
The `blurDataURL` might be missing because your using a string for `src` instead of a static import. | ||
|
||
Or `blurDataURL` might be missing because the static import is an unsupported image format. Only jpg, png, and webp are supported at this time. | ||
|
||
#### Possible Ways to Fix It | ||
|
||
- Add a [`blurDataURL`](https://nextjs.org/docs/api-reference/next/image#blurdataurl) property, the contents should be a small Data URL to represent the image | ||
- Change the [`src`](https://nextjs.org/docs/api-reference/next/image#src) property to a static import with one of the supported file types: jpg, png, or webp | ||
- Remove the [`placeholder`](https://nextjs.org/docs/api-reference/next/image#placeholder) property, effectively no blur effect |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
test/integration/image-component/default/pages/invalid-placeholder-blur-static.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react' | ||
import Image from 'next/image' | ||
import testBMP from '../public/test.bmp' | ||
|
||
const Page = () => { | ||
return ( | ||
<div> | ||
<Image | ||
id="invalid-placeholder-blur-static" | ||
src={testBMP} | ||
placeholder="blur" | ||
/> | ||
</div> | ||
) | ||
} | ||
|
||
export default Page |
12 changes: 12 additions & 0 deletions
12
test/integration/image-component/default/pages/invalid-placeholder-blur.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import React from 'react' | ||
import Image from 'next/image' | ||
|
||
const Page = () => { | ||
return ( | ||
<div> | ||
<Image id="invalid-placeholder-blur" src="/test.png" placeholder="blur" /> | ||
</div> | ||
) | ||
} | ||
|
||
export default Page |
13 changes: 13 additions & 0 deletions
13
test/integration/image-component/default/pages/small-img-import.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import React from 'react' | ||
import Image from 'next/image' | ||
import Small from '../public/small.jpg' | ||
|
||
const Page = () => { | ||
return ( | ||
<div> | ||
<Image id="small-img-import" src={Small} placeholder="blur" /> | ||
</div> | ||
) | ||
} | ||
|
||
export default Page |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters