placeholder-blur-data-url.mdx


title: '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

Rendered from the public repository vercel/next.js on GitHub; content belongs to its authors. Cached for up to an hour.

errors/placeholder-blur-data-url.mdx · vercel/next.js | Docs MD