-
Notifications
You must be signed in to change notification settings - Fork 26.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rename next/image
dangerously-unoptimized
to custom
and warn when…
… applicable (#26998) Since we are no longer accepting new built-in loaders, users may wish to use a different cloud provider. So this PR renames `dangerously-unoptimized` to `custom` to handle this case as well as the intention of `next export`. If the user doesn't add a `loader` prop, we throw an error. If the user adds a `loader` prop but it doesn't return the width, we print a warning. - Follow up to #26847 - Fixes #21079 - Fixes #19612 - Related to #26850
- Loading branch information
Showing
9 changed files
with
111 additions
and
23 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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
# Missing `width` in the URL Returned by the Loader Prop on `next/image` | ||
|
||
#### Why This Error Occurred | ||
|
||
The [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop on the `next/image` component allows you to override the built-in URL resolution with a custom implementation in order to support any 3rd party cloud provider that can perform Image Optimization. | ||
|
||
This error occurred because the provided `loader()` function did not use `width` in the returned URL string. This means that the image will likely not be resized and therefore degrade performance. | ||
|
||
#### Possible Ways to Fix It | ||
|
||
- Ensure your Image Optimization provider can resize images. Then use the `width` parameter from the [`loader()`](https://nextjs.org/docs/api-reference/next/image#loader) function to construct the correct URL string. | ||
- Add the [`unoptimized`](https://nextjs.org/docs/api-reference/next/image#unoptimized) prop. | ||
|
||
### Useful Links | ||
|
||
- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization) | ||
- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image) |
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 @@ | ||
# Missing `loader` Prop on `next/image` | ||
|
||
#### Why This Error Occurred | ||
|
||
When using the `next/image` component with [`loader="custom"`](https://nextjs.org/docs/basic-features/image-optimization#loader) in `next.config.js`, you must provide the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop to the component with your custom implementation. | ||
|
||
#### Possible Ways to Fix It | ||
|
||
- Add the [`loader`](https://nextjs.org/docs/api-reference/next/image#loader) prop to all usages of the `next/image` component. | ||
- Change the [`loader`](https://nextjs.org/docs/basic-features/image-optimization#loader) configuration in `next.config.js`. | ||
|
||
### Useful Links | ||
|
||
- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization) | ||
- [`next/image` Documentation](https://nextjs.org/docs/api-reference/next/image) |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,10 @@ | ||
import Image from 'next/image' | ||
|
||
const loader = undefined | ||
|
||
export default () => ( | ||
<div> | ||
<p>Should succeed during export</p> | ||
<Image alt="icon" src="/i.png" width="10" height="10" /> | ||
<Image alt="icon" src="/i.png" width="10" height="10" loader={loader} /> | ||
</div> | ||
) |
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