Cloudflare Images

Unpic can transform images with Cloudflare Images using the cloudflare_images provider. It can be used with Unpic framework components, or you can use the base unpic libary to generate image URLs directly.

You can import the cloudflare_images provider from the unpic package using a subpath import:

import { transform } from 'unpic/providers/cloudflare_images';

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a cloudflare_images key. This is lets you use extra features supported by Cloudflare Images, or set custom configuration options.

This example uses @unpic/astro, but the same applies to any Unpic component:

---
import { Image } from '@unpic/astro';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  options={{
      "cloudflare_images": {
      // cloudflare_images options here
      }
  }}
  operations={{
      "cloudflare_images": {
      // cloudflare_images operations here
      }
  }}
/>

In supported frameworks you can also import the base component and pass the transformer to it directly. This lets you create a custom component that doesn’t need to include and other transformer code.

---
import { Image } from '@unpic/astro/base';
import { transform } from 'unpic/providers/cloudflare_images';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The cloudflare_images provider supports the following arguments:

Options

`host`

Type: string

`accountHash`

Type: string

`imageId`

Type: string

Operations

`fit`

Type: "contain" | "cover" | "scale-down" | "crop" | "pad"

Fit mode for the image.

`gravity`

Gravity for the image when using fit modes that crop.

`width`

Type: string | number

`height`

Type: string | number

`format`

Type: (string & {}) | ImageFormat

`quality`

Type: string | number

This page is auto-generated from the cloudflare_images provider types. See anything wrong or missing? Suggest a change on GitHub.