How can I load images from Firebase Storage in a LazyColumn in Jetpack Compose in Android?

Issue

I am currently creating an app using Jetpack Compose in Android. I am using Firebase to load data into the app. The app has a main screen with a LazyColumn that loads names from Firestore database through ViewModel.

Now, I also want to load images along with names in the LazyColumn from the Firebase Storage. I have searched online on how to achieve this, however I could not find any examples related to this.

Solution

You can get the URL of the image from Firebase and use the coil library to load an image in Compose:

implementation("io.coil-kt:coil-compose:1.3.2")

In your compose

Image(
    painter = rememberImagePainter(
        data = imageUrl,
        builder = {
            crossfade(false)
            placeholder(R.drawable.placeholder)
        }
    ),
    contentDescription = "description",
    contentScale = ContentScale.Crop
)

Answered By - S Haque