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

【问题标题】：How to set an image URL as error placeholder on Coil in Jetpack Compose如何在 Jetpack Compose 中将图像 URL 设置为线圈上的错误占位符
【发布时间】：2021-08-10 13:17:06
【问题描述】：

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

这是我正在处理的代码：

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

【问题讨论】：

标签： android kotlin android-jetpack-compose coil

【解决方案1】：

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

【讨论】：

谢谢！喜欢干净的代码！！但是，它没有提供预期的行为，尽管我不明白为什么这不起作用！ :(
@Hasan 我已经检查了本地值并且它有效：将无效 url 放入 currentlySelectedImageUri 并将有效 url 放入 previousImageUri。检查本地值是否适用于您的情况，以便您知道我的部分工作正常。您也可以在 LaunchedEffect 中添加 print 以检查您的请求是否失败，并查看此时您将哪个值传递给 localImagePainterUrl
@Hasan 我已经尝试过有效的currentlySelectedImageUri - 也可以正常工作。一旦我没有注意到，当你更改currentlySelectedImageUri 时，你需要重置localImagePainterUrl，如果它是一个全局变量，我不确定我该怎么做.. 但这不应该导致你描述的错误
@Hasan 根据您的代码currentlySelectedImageUri 应始终与previousImageUri 具有相同的值。因此，当您传递无效的图像 url 时，它无法加载它，然后回退到相同的无效 url。在全局变量中存储任何内容肯定不是最佳做法，请考虑移至view models
@Hasan 你这里有错误：github.com/rawhasan/compose-exercises-image-source/blob/…，你应该将currentlySelectedImageUri.value 传递给previousImageUri，但是你传递的是新的uri

【解决方案2】：

其实有一个更简单的方法来自线圈 compose api，你可以在构建器中添加 error(R.drawable.your_placeholder_drawable) 就可以了

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

【讨论】：

【解决方案3】：

线圈ImageRequest Builder类里面有一个函数

  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

依赖等级：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)

【讨论】：

感谢您的回答！ placeholder 会将 URL 作为参数吗？ - 那是我的问题。我目前正在使用drawable。
不，没有像你提到的这样的功能，但是你可以加载占位符图像获取为可绘制并设置为可绘制的占位符但是如果占位符无法加载怎么办？我认为占位符需要是本地的