Uploadcare custom loader for Image Component @uploadcare/nextjs-loader

The following is an example of a reference to an image from the Uploadcare CDN at ucarecdn.com

It will be served directly from ucarecdn.com, without proxying through Media Proxy.

Vercel logo

The following is an example of use of the UploadcareImage helper component.

Vercel logo

The following is an example of use of the UploadcareImage helper component with placeholder=blur property. It's better to enable network throttling in dev tools to see the blurred placeholder.

Vercel logo

The following is an example of a reference to an external image at assets.vercel.com.

It will be proxied through Media Proxy.

Next.js logo

SVGs and GIFs will be used without transformations

Next.js logoVercel logo

Local image will be served AS IS in Development, and converted to the absolute URL and passed to the proxy in Production

A local image

Statically imported image will be served AS IS in Development, and converted to the absolute URL and passed to the proxy in Production

A statically imported image
Checkout the project documentation on Github @uploadcare/nextjs-loader.