archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/errors/placeholder-blur-data-url.md
Steven cc1f3b8a38
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-11 23:17:47 +00:00

920 B
Raw Blame History

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 property, the contents should be a small Data URL to represent the image
  • Change the src property to a static import with one of the supported file types: jpg, png, or webp
  • Remove the placeholder property, effectively no blur effect