how to preview the image by uri in android jetpack compose

Question

In android jetpack compose, I use navigationController to transfer the image uri(the image in the photo) to next view, then show the image in the next view. But when I write the preview in the next view. So how can I do this?

This is the code:

@Composable
fun TestCompose(navController: NavController, uri: String) {
    val uriDecode = URLDecoder.decode(uri, StandardCharsets.UTF_8.toString())
    val photoUri = Uri.parse(uriDecode)
    val painter = rememberAsyncImagePainter(
        ImageRequest
            .Builder(LocalContext.current)
            .data(data = photoUri)
            .build()
    )

    Image(
        painter = painter,
        contentDescription = "image",
        contentScale = ContentScale.Fit
    )

}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TestViewPreview() {
    // how to pass an placeholder image uri into the uri parameter?
    TestCompose(navController = rememberNavController() , uri = "")
}

I want to see the image in this view by preview

Answer 1

You can just pass placeholderUri like this:

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TestViewPreview() {
    val placeholderUri = "https://picsum.photos/200/300" // Placeholder image URI

    TestCompose(navController = rememberNavController() , uri = placeholderUri)
}

And if the placeholder image is available in drawables then you can pass it like this:

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun TestViewPreview() {
    val placeholderUri = "android.resource://${LocalContext.current.packageName}/${R.drawable.ic_launcher}"

    TestCompose(navController = rememberNavController() , uri = placeholderUri)
}

Hope this helps! Let me know if you need something else :)