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

Question

我有一个存储库类，在这里我创建了一个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类中，我有一个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对象线圈，你需要打开它并传递包含的URL。