Get image uri and display it with Coil in Compose (Android)

Question

I'm trying to fetch image uri and then display it in my application with coil.

var imageUri by remember { mutableStateOf<Uri?>(null) }
val launcher =
        rememberLauncherForActivityResult(contract = ActivityResultContracts.GetContent()) { uri: Uri? ->
            imageUri = uri
        }

    Column {
        Button(onClick = {
            //here we are going to add logic for picking image
            launcher.launch(
                "image/*"
            )

        }, content = {
            Text(text = "Select Image From Gallery")
        })
        Log.d(TAG, "ClientCardItem: $imageUri")
        Text(text = imageUri.toString())

I made this just to check if i fetched uri. I got result like this: "content://com.android.providers.media.documents/document/image%3A18", i put it to string.

This is for image display:

Image(
    painter = rememberImagePainter(
        data  = Uri.parse(uri)  // or ht
    )
    ,
    contentDescription = "123",
    modifier = Modifier.height(200.dp).width(200.dp),
    contentScale = ContentScale.FillWidth
)

I know that I dont have .jpg or .png or something else to display it properly. My question is how to get that format to display picture I picked.

EDIT: rememberAsyncImagePainter, rememberImagePainter or AsyncImage are not found ?

After I updated to:

implementation "io.coil-kt:coil:2.2.2"

On AsyncImage() -> Unresolved reference: AsyncImage

Answer 1

To display the image just use:

AsyncImage(model = imageUri, contentDescription = "Picture")

or:

Image(
    painter = rememberAsyncImagePainter(imageUri),
    contentDescription = "Picture",
)