rsnext/errors/placeholder-blur-data-url.md

# `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 you're 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, webp, and avif 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
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 2021-06-10 20:51:35 +02:00			# `placeholder=blur` without `blurDataURL`

			`#### Why This Error Occurred`

			You are attempting use the `next/image` component with `placeholder=blur` property but no `blurDataURL` property.

Fix typo in placeholder-blur-data-url error docs (#27510) ✨ 2021-07-26 19:04:47 +02:00			The `blurDataURL` might be missing because you're using a string for `src` instead of a static import.
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 2021-06-10 20:51:35 +02:00
Add support for AVIF to `next/image` (#29683) Add support for AVIF to `next/image` - Fixes #27882 - Closes #27432 ## Feature - [x] Implements an existing feature request - [x] Related issues linked - [x] Integration tests added - [x] Documentation added - [x] Update manifest output - [x] Warn when `sharp` is outdated - [x] Errors & Warnings have helpful link attached - [ ] Remove `image-size` in favor of `squoosh`/`sharp` (optional, need to benchmark) 2021-10-12 01:17:47 +02:00			Or `blurDataURL` might be missing because the static import is an unsupported image format. Only jpg, png, webp, and avif are supported at this time.
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 2021-06-10 20:51:35 +02:00
			`#### 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