Enables image loading, caching, and displaying in a Compose-based UI with customizable image loaders and interceptors. Supports multiple image sources, efficient caching strategies, and platform-specific configurations.
Compose Image library for Kotlin Multiplatform.
Add the dependency in your common module's commonMain sourceSet
kotlin {
android()
ios()
// ...
sourceSets {
val commonMain by getting {
dependencies {
+ api("io.github.qdsfdhvh:image-loader:1.10.0")
// optional - Compose Multiplatform Resources Decoder
+ api("io.github.qdsfdhvh:image-loader-extension-compose-resources:1.10.0")
// optional - Moko Resources Decoder
+ api("io.github.qdsfdhvh:image-loader-extension-moko-resources:1.10.0")
// optional - Blur Interceptor (only support bitmap)
+ api("io.github.qdsfdhvh:image-loader-extension-blur:1.10.0")
}
}
val jvmMain by getting {
dependencies {
// optional - ImageIO Decoder
+ api("io.github.qdsfdhvh:image-loader-extension-imageio:1.10.0")
}
}
}
}
val painter = rememberImagePainter("https://..")
Image(
painter = painter,
contentDescription = "image",
)
PS: default Imageloader will reload when it's displayed, is not friendly for https link, so it is recommended to custom ImageLoader and configure the cache.
I configure the Imageloader {} on each platform, you also can configure it in the commonMain like Tachidesk-JUI.
@Composable
fun Content() {
CompositionLocalProvider(
LocalImageLoader provides remember { generateImageLoader() },
) {
AutoSizeImage(
,
contentDescription = ,
)
AutoSizeBox() { action ->
(action) {
ImageAction.Success -> {
Image(
rememberImageSuccessPainter(action),
contentDescription = ,
)
}
ImageAction.Loading -> {}
ImageAction.Failure -> {}
}
}
Image(
painter = rememberImagePainter(),
contentDescription = ,
)
}
}
Use priority: AutoSizeImage -> AutoSizeBox -> rememberImagePainter.
AutoSizeBox & AutoSizeImage are based on Modifier.Node, AutoSizeImage ≈ AutoSizeBox + Painter.
fun generateImageLoader(): ImageLoader {
return ImageLoader {
options {
androidContext(applicationContext)
}
components {
setupDefaultComponents(context)
}
interceptor {
// cache 25% memory bitmap
bitmapMemoryCacheConfig {
maxSizePercent(context, )
}
imageMemoryCacheConfig {
maxSize()
}
painterMemoryCacheConfig {
maxSize()
}
diskCacheConfig {
directory(context.cacheDir.resolve().toOkioPath())
maxSizeBytes( * * )
}
}
}
}
for more platform targets, see app.
val imageRequest = ImageRequest {
data(url)
addInterceptor(DoSomthingInterceptor())
components {
// ...
}
extra {
set("key_int", 11)
}
}
val newImageRequest = ImageRequest(imageRequest) {
// ...
}
LocalImageLoader has no default value, you must be configured on each platform, and configuration is similar to coil.
@Composable
fun Content() {
CompositionLocalProvider(
LocalImageLoader provides remember { generateImageLoader() },
) {
val painter = rememberAsyncImagePainter("https://.....")
Image(
painter = painter,
contentDescription = "image",
)
}
}
fun generateImageLoader(): ImageLoader {
return ImageLoaderBuilder().build()
}
fun generateImageLoader(): ImageLoader {
return ImageLoader {
components {
setupDefaultComponents()
}
interceptor {
// cache 32MB bitmap
bitmapMemoryCacheConfig {
maxSize(32 * 1024 * 1024) // 32MB
}
// cache 50 image
imageMemoryCacheConfig {
maxSize(50)
}
// cache 50 painter
painterMemoryCacheConfig {
maxSize(50)
}
diskCacheConfig {
directory(getCacheDir().toOkioPath().resolve("image_cache"))
maxSizeBytes(512L * 1024 * 1024) // 512MB
}
}
}
}
// about currentOperatingSystem, see app
private fun getCacheDir() = when (currentOperatingSystem) {
OperatingSystem.Windows -> File(System.getenv("AppData"), "$ApplicationName/cache")
OperatingSystem.Linux -> File(System.getProperty("user.home"), ".cache/$ApplicationName")
OperatingSystem.MacOS -> File(System.getProperty("user.home"), "Library/Caches/$ApplicationName")
else -> throw IllegalStateException("Unsupported operating system")
}
fun generateImageLoader(): ImageLoader {
return ImageLoader {
components {
setupDefaultComponents()
}
interceptor {
// cache 32MB bitmap
bitmapMemoryCacheConfig {
maxSize(32 * 1024 * 1024) // 32MB
}
// cache 50 image
imageMemoryCacheConfig {
maxSize(50)
}
// cache 50 painter
painterMemoryCacheConfig {
maxSize(50)
}
diskCacheConfig {
directory(getCacheDir().toPath().resolve("image_cache"))
maxSizeBytes(512L * 1024 * 1024) // 512MB
}
}
}
}
private fun getCacheDir(): String {
return NSSearchPathForDirectoriesInDomains(
NSCachesDirectory,
NSUserDomainMask,
true,
).first() as String
}
Surfaced from shared tags and platforms — no rankings paid for.