ImageLoaderIntegration

Supabase-kt Compose-ImageLoader Integration

Extends supabase-kt with a Compose-ImageLoader integration for image loading.

Supported targets:

Target	JVM	Android	JS	iOS
Status	✅	✅	✅	✅

Wasm-JS is currently not supported due to a bug in the Compose-ImageLoader library.

In-depth Kotlin targets

JS: Browser

iOS: iosArm64, iosSimulatorArm64, iosX64

Installation

Newest version:

dependencies {
    implementation("io.github.jan-tennert.supabase:imageloader-integration:VERSION")
}

Install plugin in main SupabaseClient. See the documentation for more information

val client = createSupabaseClient(
    supabaseUrl = "https://id.supabase.co",
    supabaseKey = "apikey"
) {
    //...
    install(Storage) {
        //your config
    }
    install(ImageLoaderIntegration)
}

Usage

Add Supabase Fetcher and Keyer to Compose-ImageLoader

Create a new ImageLoader with the Supabase Fetcher and Keyer. See the Compose-ImageLoader documentation for more information.

The fetcher is used to download the data and the keyer is used to allow in-memory and disk caching

ImageLoader {
    //...
    components {
        add(keyer = supabaseClient.imageLoader)
        add(fetcherFactory = supabaseClient.imageLoader)
    }
    //...
}

Display images from Supabase Storage

You can easily display images from Supabase Storage like this:

AutoSizeImage(
    request = remember { ImageRequest(authenticatedStorageItem("icons", "user.png")) }, //or use publicStorageItem("icons", "user.png") for public buckets
    contentDescription = null
)

The ImageLoader integration will automatically add the Authorization header to the request if the bucket is not public.