从 Firebase 获取数据时如何使用 AsyncImage 设置图像？

Question

我有一个存储库 class，我在其中创建 Firestore 调用以获取图像 URL：

override suspend fun getImageUrl() = flow {
    try {
        emit(Response.Loading)
        val imageUrl = ref.document(id).get().await().getString("imageUrl")
        emit(Response.Success(imageUrl))
    } catch (e: Exception) {
        emit(Response.Failure(e))
    }
}

在 ViewModel class 中，我有一个 State 对象，我在其中设置了 URL，如下所示：

var imageUrlState = mutableStateOf<Response<String>>(Response.Success(null))

init {
    getImageUrl()
}

fun getImageUrl() {
    viewModelScope.launch {
        repo.getImageUrl().collect { response ->
            imageUrlState.value = response
        }
    }
}

在我的 ProfileScreen 中，我有这个：

@Composable
fun ProfileScreen(
    viewModel: ImageUrlViewModel = hiltViewModel()
) {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(viewModel.imageUrlState.value) // Doesn't work!!!
                .crossfade(true)
                .build(),
            contentDescription = null,
            contentScale = ContentScale.Crop,
            modifier = Modifier.clip(CircleShape).width(96.dp).height(96.dp)
        )
    }
}

这是我为跟踪错误所做的工作：

when(val response = viewModel.imageUrlState.value) {
    is Response.Loading -> ProgressBar()
    is Response.Success -> Unit
    is Response.Failure -> LaunchedEffect(Unit) {
        print(response.e)
    }
}

问题是我从数据库中正确地得到了 URL，但是图像 而不是 在 AsyncImage 上呈现。我检查了 URL 并且它在浏览器中正确打开？如何克服这种情况？

Answer 1

要查看 Coil 请求失败的原因，您可以使用 listener:

ImageRequest.Builder(LocalContext.current)
    .listener(
        onError = { request, result ->
            println(result.throwable)
        } 
    )

我的假设是，使用 viewModel.imageUrlState.value 将 Response 对象传递给 Coil，您需要将其解包并传递包含的 URL.

从 Firebase 获取数据时如何使用 AsyncImage 设置图像？

How to set am image using AsyncImage when getting data from Firebase?

android

kotlin

firebase

android-jetpack-compose

coil