Coil don't load image in emulator with Jetpack Compose

Question

I need to show an image in my app by url using Coil, but this image don't load. I follow the official documentation https://coil-kt.github.io/coil/compose/.

profile card

implementation "io.coil-kt:coil-compose:1.3.1"

@Composable
fun ProfilePicture(profilePicture: String, online: Boolean) {
    Card(
        shape = CircleShape,
        border = BorderStroke(
            width = 2.dp,
            color = if (online) MaterialTheme.colors.lightGreen else Color.Red
        ),
        modifier = Modifier.padding(16.dp),
        elevation = 4.dp
    ) {
        Image(
            painter = rememberImagePainter(
                data = profilePicture,
                builder = {
                    transformations(CircleCropTransformation())
                }
            ),
            modifier = Modifier.size(72.dp),
            contentDescription = "Profile picture"
        )
    }
}

Update

An exemplo to UserModel

UserModel(
    name = "John Doe",
    profilePicture = "https://randomuser.me/api/portraits/men/32.jpg",
    online = true
)

Answer 1

Coil doesn't load images on the emulator because you need to enable clear text traffic, add this line to the application tag in AndroidManifest.xml.

android:usesCleartextTraffic="true"

Then uninstall the application from your emulator and install it again, it will work.

Answer 2

I had the same issue, only occurring on the emulator. Turning off mobile data, while leaving Wi-Fi enabled solved the problem for me.