Supabase

Unpic can transform images with Supabase using the supabase 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 supabase provider from the unpic package using a subpath import:

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

If using an Unpic component, you can optionally pass custom operations and options to the component using an object with a supabase key. This is lets you use extra features supported by Supabase, 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={{
      "supabase": {
      // supabase options here
      }
  }}
  operations={{
      "supabase": {
      // supabase 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/supabase';
---
<Image
  src="image.jpg"
  width={800}
  height={600}
  transformer={transformer}
/>

Types

The supabase provider supports the following arguments:

Options

The supabase provider does not support any extra configuration options.

Operations

resize

Type: "contain" | "cover" | "fill"

You can use different resizing modes:

• cover: resizes the image while keeping the aspect ratio to fill a given size and crops projecting parts.
• contain: resizes the image while keeping the aspect ratio to fit a given size.
• fill: resizes the image without keeping the aspect ratio.

format

Type: "origin"

When using the image transformation API, Storage will automatically find the best format supported by the client and return that to the client. In case you’d like to return the original format of the image and opt-out from the automatic image optimization detection, you can pass the format=origin parameter when requesting a transformed image

width

Type: string | number

height

Type: string | number

quality

Type: string | number

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