Cloudflare Images

Integration between Cloudflare Images and the image module.

Setup

You need your account hash, which you can find in the Cloudflare dashboard under Images > Overview > Developer Resources.

export default defineNuxtConfig({
  image: {
    cloudflareimages: {
      accountHash: 'YOUR_ACCOUNT_HASH'
    }
  }
})

Images are referenced by their image ID (not a URL path):

<NuxtImg
  provider="cloudflareimages"
  src="083eb7b2-5392-4565-b69e-aff66acddd00"
  width="400"
  height="300"
/>

Options

accountHash

Required. Your Cloudflare Images account hash.

baseURL

Default: https://imagedelivery.net/

The base URL for image delivery. You can change this if you are serving images through a custom domain.

Variants vs. flexible transformations

Cloudflare Images supports two ways of serving images:

1. Named variants — Predefined sizes configured in the Cloudflare dashboard (e.g. public, thumbnail). Use the variant modifier.
2. Flexible variants — On-the-fly transformations using width, height, fit, etc. This must be enabled in your Cloudflare Images dashboard.

When you pass a variant modifier or no image modifiers at all, the provider uses the variant URL format. Otherwise, it uses flexible variant transformations.

<!-- Uses the 'public' variant (default when no modifiers) -->
<NuxtImg provider="cloudflareimages" src="my-image-id" />

<!-- Uses a named variant -->
<NuxtImg
  provider="cloudflareimages"
  src="my-image-id"
  :modifiers="{ variant: 'thumbnail' }"
/>

<!-- Uses flexible variants (requires enablement in dashboard) -->
<NuxtImg
  provider="cloudflareimages"
  src="my-image-id"
  width="400"
  height="300"
  fit="cover"
/>

Modifiers

On top of the standard modifiers, the following Cloudflare Images-specific modifiers are supported when using flexible variants:

fit