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
)

Madcap

Can you try putting a static url in it, so you can be sure coil is the problem – Firepower

please provide an example of profilePicture that's not working – Letty

I updated my question with an UserModel example. – Madcap

@GustavoFaria in my new project your view with image loads just fine with your example – Letty

@Philip Thanks for the feedback. I test it on a physical device and works fine, but on all my emulator versions doesn't work – Madcap

Does the emulator have internet access? If you open the browser in it, can you navigate? Can you open the image URL in Chrome inside the emulator? – Orthoclase

@GustavoFaria, I have the same problem as you: no images load in the emulator, but it works just fine on a real device. – Shadrach

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.

Spock

This only mitigates the symptoms (which might be enough if you just want to quickly test something), but doesn't solve the cause of the problem. In my case it was wrong date/time set on the emulator, which made the certificate expired. – Tetanus

I tried this, but the image still isn't loading on the emulator for me. – Grafting

Answer 2

Check your date/time on the emulator.

The problem might be caused by the fact that Android emulator seems to not synchronize date and time with the network. This makes the emulator certificate appear as expired and leads to the server refusing connection.

After setting the emulator time/date manually to the current one, downloading images started working for me.

Also cold booting the emulator might help (looks like booting from a saved image for some reason sets the date/time to the one from when the image was saved).

Tetanus

This worked for me. I initially added android:usesCleartextTraffic="true" to my AndroidManifest and even uninstalled the app and reinstalled. All that did nothing until I cold-booted. I then removed android:usesCleartextTraffic="true", uninstalled and reinstalled the app, and the image still appears. – Lamia

Answer 3

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

Erk

Emulator WiFi doesn't have access to the Internet. How did you make it work? – Tetanus