I'm currently working on a project using Compose Multiplatform project, and looking for ways to handle image loading from a URL. However, since Coil isn't supported, I haven't found a solution.
I've come across a manual Ktor implementation that converts bitmaps, but it lacks caching support and other implementation details(e.g. loading, error states).
Has anyone integrated image loading using a library or found other alternatives for Compose Multiplatform?
Coil 3.0.0-alpha06 has multiplatform support, Ktor 3.0.0-wasm2 has javscript support
Basic configuration below, typically shared/build.gradle.kts:
kotlin {
// targets configuration
sourceSets {
commonMain.dependencies {
implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha06")
implementation("io.coil-kt.coil3:coil-network-ktor:3.0.0-alpha06")
}
androidMain.dependencies {
implementation("io.ktor:ktor-client-okhttp:3.0.0-alpha06")
}
iosMain.dependencies {
implementation("io.ktor:ktor-client-darwin:3.0.0-alpha06")
}
jsMain.dependencies {
implementation("io.ktor:ktor-client-js:3.0.0-wasm2")
}
}
}
IMPORTANT: To load images from a network URL in Coil 3.0 you'll need to import a separate artifact for each source set.
Basic usage of AsyncImage:
AsyncImage(
model = "https://example.com/image.jpg", // replace with working URL
contentDescription = null
)
For more advanced usage over loading and error use SubcomposeAsyncImage
If you already using coil 2.x, then check guide how to upgrade to coil 3.x
Kamel can load images from URLs: https://github.com/Kamel-Media/Kamel
Gradle dependencies:
kotlin {
sourceSets {
commonMain {
dependencies {
implementation("media.kamel:kamel-image:x.x.x")
implementation("io.ktor:ktor-client-okhttp:y.y.y")
// ...
}
}
}
}
Usage:
KamelImage(
resource = asyncPainterResource(data = "https://example.com/image.jpg"),
contentDescription = "description"
)
I know it's too late to write an answer but writing it for those who are still looking for some shortcut and cool answers. So simply use rememberAsyncImagePainter and pass your string url as model in it.
Image(
painter = rememberAsyncImagePainter("www.image.com"),
contentDescription = subCategory.entryTypeName,
contentScale = ContentScale.Crop,
modifier = Modifier
.requiredSize(64.dp)
.clip(RoundedCornerShape(8.dp))
)
