21

我可以使用 val image = +imageResource(R.drawable.header) 和使用DrawImage(image)从可绘制资源加载图像，

但是如何将字符串 url 加载到DrawImage(image)? 中。我试过使用 Glide，但它需要加载到 imageView 中。同时DrawImage(image)不从 imageView 获取输入。

谢谢。

4

10 回答 10

13

凝视1.0.x实现它的最佳方法是使用Coil-Compose库。

添加你build.gradle的依赖

dependencies {
    implementation("io.coil-kt:coil-compose:1.3.1")
}

然后只需使用：

Image(
    painter = rememberImagePainter("your url"),
    contentDescription = "My content description",
)

这将加载url传入的rememberImagePainter，然后使用标准Image可组合显示生成的图像。

于 2021-03-18T08:23:35.010 回答
8

Jetpack Compose 线圈

从 Internet 加载图像的另一个选项。

将 Coil 依赖项添加到build.gradle：

dependencies {
    implementation "io.coil-kt:coil-compose:1.4.0")
}

简单使用：

Image(
    painter = rememberImagePainter("https://picsum.photos/300/300"),
    contentDescription = stringResource(R.string.image_content_desc)
)

不要忘记添加互联网权限（AndroidManifest.xml）

<uses-permission android:name="android.permission.INTERNET"/>

更多自定义：Jetpack Compose - Coil Document

于 2021-05-05T10:12:30.347 回答
6

从 url 加载位图并使用asImageAsset()位图扩展方法的解决方案：

@Composable
fun loadPicture(url: String): UiState<Bitmap> {
    var bitmapState: UiState<Bitmap> by state<UiState<Bitmap>> { UiState.Loading }

    Glide.with(ContextAmbient.current)
        .asBitmap()
        .load(url)
        .into(object : CustomTarget<Bitmap>() {
            override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                bitmapState = UiState.Success(resource)
            }

            override fun onLoadCleared(placeholder: Drawable?) { }
        })

    return bitmapState
}

像这样将函数与 Image() 一起使用：

val loadPictureState = loadPicture(url)
if (loadPictureState is UiState.Success<Bitmap>)
    Image(loadPictureState.data.asImageAsset())
else
    Text("Loading...")

此代码段使用JetNews官方 Google 示例中的Glide库和UiState辅助函数，用于 Jetpack Compose

于 2020-04-24T15:34:14.190 回答
2

在 Jetpack 的 beta 版本发布后，使用Jetpack Compose 的accompanist - Utils 库是上述用例的最干净的方式。

于 2021-03-03T08:41:19.930 回答
2

您可以使用remember来观看位图，然后使用 Glide 获取它并在获得后立即更新它。

var bitmap by remember { mutableStateOf<Bitmap?>(null)}

Glide.with(ContextAmbient.current).asBitmap()
    .load("https://picsum.photos/200/300")
    .into(object : CustomTarget<Bitmap>() {
        override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
             bitmap = resource
          }

          override fun onLoadCleared(placeholder: Drawable?) {}
      })

然后你可以像这样使用它：


if (bitmap != null )
    Image(bitmap!!.asImageAsset(), Modifier.fillMaxWidth())
else
    Text("Loading Image...")

（这是bviale 答案的现代版本）

于 2020-10-30T16:21:15.080 回答
2

添加

dependencies {
    implementation "com.google.accompanist:accompanist-glide:0.10.0"
}

接着

    import androidx.compose.foundation.Image
    import com.google.accompanist.glide.rememberGlidePainter
    
    Image(
        painter = rememberGlidePainter("https://picsum.photos/300/300"),
        contentDescription = stringResource(R.string.image_content_desc),
        previewPlaceholder = R.drawable.placeholder,
    )

现在你可以使用“io.coil-kt:coil-compose:1.3.1”

于 2021-05-26T08:28:35.160 回答
1

对于 Compose 1.1.0，这个片段就像一个魅力，它在 Composable Preview 中显示占位符：

@Composable
fun loadPicture(url: String, placeholder: Painter? = null): Painter? {

  var state by remember {
    mutableStateOf(placeholder)
  }

  val options: RequestOptions = RequestOptions().autoClone().diskCacheStrategy(DiskCacheStrategy.ALL)
  val context = LocalContext.current
  val result = object : CustomTarget<Bitmap>() {
    override fun onLoadCleared(p: Drawable?) {
      state = placeholder
    }

    override fun onResourceReady(
      resource: Bitmap,
      transition: Transition<in Bitmap>?,
    ) {
      state = BitmapPainter(resource.asImageBitmap())
    }
  }
  try {
    Glide.with(context)
      .asBitmap()
      .load(url)
      .apply(options)
      .into(result)
  } catch (e: Exception) {
    // Can't use LocalContext in Compose Preview
  }
  return state
}

@Composable
fun ImageItem() {
  val painter = loadPicture(
    url = item.image.fragments.image.href,
    placeholder = painterResource(id = R.drawable.tc_ic_no_image)
  )
  if (painter != null) {
    Image(painter = painter)
  }
}
于 2021-11-11T13:31:06.920 回答
0

我找到了一种非常简单的方法来显示来自 URL 的图像。

  1. 添加 dependencies{ implementation("io.coil-kt:coil:1.4.0") }

  2. 就这样做

    imageView.load("https://www.example.com/image.jpg")

同样对于资源 o 文件，您可以执行以下操作：

imageView.load(R.drawable.image)

imageView.load(File("/path/to/image.jpg"))

可以使用可选的尾随 lambda 配置请求：

imageView.load("https://www.example.com/image.jpg") {
    crossfade(true)
    placeholder(R.drawable.image)
    transformations(CircleCropTransformation())
}

我在此处从官方线圈页面找到此信息：在此处输入链接描述

于 2022-02-05T22:05:01.993 回答
0

尝试使用https://github.com/skydoves/landscapist

它似乎是一个很好的库来加载图像以及滑动、线圈等它可以覆盖处理程序来做任何自定义的事情，当你遇到错误或在加载阶段

于 2022-02-13T20:46:17.343 回答
0

由于某种原因，Jetpack compose 中仍未添加它的支持。不过暂时可以用，这个类

https://gist.github.com/nglauber/8a3c39db47813483d788fb2914f0f21f#file-image-kt

要使用它，您需要以这种方式调用它：

Image(
  <your image url>,
  144.dp,
  96.dp
  )
}

你可以在这里查看我是如何使用它的。 https://github.com/ranjeetsinha13/gobble/blob/f8d9bca4b010adf5b4aa59cc6e56f8612ee1de09/app/src/main/java/com/rs/gobble/ui/fragments/SearchFragment.kt#L120

于 2020-01-08T10:00:26.967 回答