时间戳

首页 > 解决方案 > 如何在 Jetpack Compose 中将图像 URL 设置为线圈上的错误占位符

android - 如何在 Jetpack Compose 中将图像 URL 设置为线圈上的错误占位符

问题描述

Coil 接受可绘制资源作为错误占位符。有没有办法在这里使用图像 URL？

这是我正在处理的代码：

// Global variables
var currentlySelectedImageUri = mutableStateOf<Uri?>(null)
var previousImageUri: Uri? = null

// @Composable fun() {...
Image(
    painter = rememberImagePainter(
    if (currentlySelectedImageUri.value != null) { // use the currently selected image
        currentlySelectedImageUri.value
    } else {
        if (previousImageUri != null) { // use the previously selected image
            previousImageUri
        } else {
            R.drawable.blank_profile_picture // use the placeholder image
        }
    }, builder = {
        placeholder(R.drawable.blank_profile_picture)
        error(R.drawable.blank_profile_picture) // FIXME: Set the previously selected image
    }),
    contentDescription = "profile image",
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxWidth()
)

标签： androidkotlinandroid-jetpack-composecoil

解决方案

您可以检查painter.state值。

最初它是ImagePainter.State.Empty，而图像正在加载它ImagePainter.State.Loading，如果它失败 - 它变成ImagePainter.State.Error. 此时您可以更改线圈 url，例如，使用本地记忆变量：

val localImagePainterUrl = remember { mutableStateOf<Uri?>(null) }
val painter = rememberImagePainter(
    data = localImagePainterUrl.value
        ?: currentlySelectedImageUri.value
        ?: previousImageUri
        ?: R.drawable.blank_profile_picture,
    builder = {
        placeholder(R.drawable.blank_profile_picture)
    })
val isError = painter.state is ImagePainter.State.Error
LaunchedEffect(isError) {
    if (isError) {
        localImagePainterUrl.value = previousImageUri
    }
}

Image(
    painter = painter,
    ...
)

推荐阅读