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?

Photography

Try using an https URL and see if you have better luck. – Inducement

I will not take the credits but I will point you to my question, which I think has the answer you are looking for have a look at: https://mcmap.net/q/2035890/-how-to-load-an-image-with-coil-from-uri-in-jetpack-compose – Calumet

I'd tried that already, but without the permission. It IS still required, though, Good call – Photography

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

Photography

classic! gets me every time – Basiliabasilian

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()

Yate

It works, Thanks! – Jetton