使用Coil3的AsyncImage无法加载网络图片问题求助

AI 小北

2026-6-14

解决Coil3在Jetpack Compose中加载网络图片仅显示错误占位图的问题

以下是几个排查方向和解决方法：

确认Coil3依赖配置正确
Coil3的依赖与旧版本存在差异，需确保在模块的build.gradle.kts（或build.gradle）中添加了正确的依赖项：

dependencies {
    // Coil Compose 3.x核心依赖
    implementation("io.coil-kt:coil-compose:3.0.0")
    // 若需支持WebP等额外格式，可手动添加核心库（通常会自动关联）
    implementation("io.coil-kt:coil:3.0.0")
}

替换LocalPlatformContext.current为LocalContext.current
在Android平台的Compose场景中，构建ImageRequest应使用LocalContext.current，LocalPlatformContext.current多用于跨平台Compose开发，Android环境下使用可能引发上下文相关异常：
```
val imageRequest = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .size(Size.ORIGINAL)
        .build()
```
清理冲突的Modifier配置
你的AsyncImage同时设置了fillMaxSize()和size(80.dp)，两者存在优先级冲突，虽然不影响图片加载，但可能导致显示异常，建议保留符合需求的一个：
```
modifier = Modifier.size(80.dp) // 或根据需求使用Modifier.fillMaxSize()
```

检查ImageLoader的有效性
Coil3默认会自动初始化全局ImageLoader，但如果自定义了ImageLoader，需确保它被正确注入到Compose环境中：

// 在Application类中初始化自定义ImageLoader
val imageLoader = ImageLoader.Builder(applicationContext)
    .crossfade(true)
    .build()

// 在Compose根节点提供ImageLoader
CompositionLocalProvider(LocalImageLoader provides imageLoader) {
    Test()
}