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

Question

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()
)

Answer 1

在 Coil 2.0.0 中，AsyncImage 和 rememberAsyncImagePainter 都有 error 接受任何其他画家的参数：

AsyncImage(
    model = imageURL,
    contentDescription = null,
    error = painterResource(R.drawable.error)
)

线圈1.4.0版本：

您可以检查 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,
    ...
)

Answer 2

线圈ImageRequest Builder里面有个函数class

  fun placeholder(@DrawableRes drawableResId: Int) = apply {
      this.placeholderResId = drawableResId
      this.placeholderDrawable = null
  }

用法：

Image(
        painter = rememberImagePainter(
            data = url,
            builder = {
                placeholder(R.drawable.your_placeholder_drawable) // or bitmap
            }
        )
    )

更新:

同时使用：com.google.accompanist.placeholder

依赖性gradle：com.google.accompanist:accompanist-placeholder:accompanist_version

// accompanist_version = 0.19.0

Modifier.placeholder(
        visible =  true/false,
        color = color,
        highlight = PlaceholderHighlight.shimmer(color),
        shape = imageShape // RectangleShape)

Answer 3

实际上有一个更简单的方法来自 coil compose api ，你可以只添加 error(R.drawable.your_placeholder_drawable) 到构建器就可以了

Image(painter = rememberImagePainter(data = url, builder = {error(R.drawable.your_placeholder_drawable)}))

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

How to set an image URL as error placeholder on Coil in Jetpack Compose

android

kotlin

android-jetpack-compose

coil