`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, though animated images are not supported.
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, webp, or avif (animated images not supported) - Remove the
placeholder
property, effectively no blur effect
Was this helpful?