jetpack Compose with Coil not loading URL images

Question

New to Jetpack Compose and Coil, but not new to Android or Java/Kotlin.

I'm not able to show images from a URL...Something basic missing?

I took the Google/Android tutorial from (https://developer.android.com/jetpack/compose/tutorial) and added to the gradle script:

implementation("io.coil-kt:coil:2.0.0-rc03")
implementation("io.coil-kt:coil-compose:2.0.0-rc03")

And I added a String url to the Messages:

data class Message(val author: String, val url: String, val body: String)

and added URLs to the sample data:

Message(
        "Colleague",
        "http://martypants.us/images/person4.png",
        "Searching for alternatives to XML layouts..."
    )

And in my @Composable, I changed it to use an AsyncImage to load the URL instead of a drawable

@Composable
fun MessageCard(msg: Message) {
    Row {
     AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(msg.url)
            .build(),
        placeholder = painterResource(R.drawable.ic_profile),
        error = painterResource(R.drawable.ic_error),
        contentDescription = stringResource(R.string.description),
        contentScale = ContentScale.Fit,
        modifier = Modifier
            // Set image size to 40 dp
            .size(40.dp)
            .width(48.dp)
            .height(48.dp)
            // Clip image to be shaped as a circle
            .clip(CircleShape)
            .align(Alignment.CenterVertically)
            .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
    )

}

When I run it, it doesn't load the image. I verified the image exists, is readable, etc. I only see the error placeholder, and I never see any errors in Logcat.

Lots of other tutorials show similar usage, but can't' seem to figure out why my images are not loaded. What am i missing?

Answer 1

Well, that was a rookie mistake... sort of... I had been testing on my Pixel4a running Android 12 - no images, but no errors at all. But then I went outside to clear my head and took only my laptop and used an emulator. A pixel2 emulator running Android 11 and it the app crashed and it was very apparent what I did wrong.

FATAL EXCEPTION: OkHttp Dispatcher Process: com.example.jetpackcomposetest, PID: 19029 java.lang.SecurityException: Permission denied (missing INTERNET permission?)

now I'm curious why my pixel4a never complained about permissions nor crashed ... and never got the fatal exception from Okhttp

Answer 2

You can try adding setHeader("User-Agent", "Mozilla/5.0") to ImageRequest.Builder

Something like

ImageRequest.Builder(LocalContext.current)
        .data(msg.url)
        .setHeader("User-Agent", "Mozilla/5.0")
        .build()