如何在Kotlin Compose WASM中从互联网加载图片？

1. 是否支持从互联网加载图片？ #

完全支持，Compose for WASM 并非只能加载本地或打包资源，只要配合正确的图片加载逻辑，就能实现网络图片的展示。

2. 推荐的实现方案 #

原生实现（无第三方依赖） #

基于Compose的协程能力和Web平台API，手动完成网络请求、图片解码和状态管理：

• 用kotlinx-coroutines-wasm发起异步网络请求
• 通过imageFromBytes将字节流转为Compose可渲染的ImageBitmap
• 用remember和LaunchedEffect处理加载、成功、失败三种状态

第三方库：Coil Compose Multiplatform #

Coil 已支持Compose Multiplatform（包含WASM），封装了缓存、占位图、错误处理等常用功能，开发效率更高。

3. 代码示例 #

原生实现代码 #

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.imageFromBytes
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext
import kotlinx.browser.window
import kotlin.js.Promise

// 扩展函数简化Promise await调用
fun <T> Promise<T>.await(): T = kotlinx.coroutines.promise.await()

@Composable
fun NetworkImage(url: String) {
    val imageBitmap = remember { mutableStateOf<ImageBitmap?>(null) }
    val isLoading = remember { mutableStateOf(true) }
    val errorMsg = remember { mutableStateOf<String?>(null) }

    LaunchedEffect(url) {
        isLoading.value = true
        errorMsg.value = null
        try {
            val response = withContext(Dispatchers.IO) {
                window.fetch(url).await().takeIf { it.ok }
                    ?: throw Exception("请求失败，状态码: ${it.status}")
            }
            val byteArray = response.arrayBuffer().await().toByteArray()
            imageBitmap.value = imageFromBytes(byteArray)
        } catch (e: Exception) {
            errorMsg.value = e.localizedMessage
        } finally {
            isLoading.value = false
        }
    }

    when {
        isLoading.value -> {
            // 替换为你的加载中UI，比如进度条
            // CircularProgressIndicator(modifier = Modifier.size(48.dp))
        }
        errorMsg.value != null -> {
            // 替换为你的错误提示UI
            // Text(text = "加载失败: ${errorMsg.value}")
        }
        imageBitmap.value != null -> {
            Image(
                bitmap = imageBitmap.value!!,
                contentDescription = "网络图片",
                modifier = Modifier.size(200.dp)
            )
        }
    }
}

Coil实现代码 #

第一步，添加依赖（在build.gradle.kts的commonMain依赖块中）：

implementation("io.coil-kt:coil-compose:2.5.0")
implementation("io.coil-kt:coil-network:2.5.0")

第二步，使用AsyncImage组件：

import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import coil.compose.AsyncImage

@Composable
fun CoilNetworkImage(url: String) {
    AsyncImage(
        model = url,
        contentDescription = "网络图片",
        modifier = Modifier.size(200.dp),
        // 可选配置：占位图、错误图
        // placeholder = painterResource("placeholder.png"),
        // error = painterResource("error.png")
    )
}

提示：Coil会自动处理WASM平台的网络请求适配，无需额外配置缓存或网络逻辑。

内容的提问来源于stack exchange，提问作者Kys0me