android-jetpack-composeandroid-jetpackandroid-glideandroid-imagecoil

Why for the same image "Glide" is working correctly, but "coil" is giving error?


I tried use "Coil" for the image processing/loading but it is not loading the image and also it is giving error. Then I tried using "Glide" for my same image, and it is working perfectly fine. I don't know why coil is not working and it is giving this error :

2024-12-29 08:29:07.156  7304-7304  RealImageLoader         com.example.messagesendingapp        E  🚨 Failed - https://cdn.pixabay.com/photo/2024/11/24/06/33/fireworks-9220290_960_720.jpg
2024-12-29 08:29:07.157  7304-7304  RealImageLoader         com.example.messagesendingapp        E  java.lang.IllegalStateException: Unable to create a fetcher that supports: https://cdn.pixabay.com/photo/2024/11/24/06/33/fireworks-9220290_960_720.jpg (Ask Gemini)
                                                                                                        at coil3.intercept.EngineInterceptor.fetch(EngineInterceptor.kt:153)
                                                                                                        at coil3.intercept.EngineInterceptor.execute(EngineInterceptor.kt:115)
                                                                                                        at coil3.intercept.EngineInterceptor.access$execute(EngineInterceptor.kt:32)
                                                                                                        at coil3.intercept.EngineInterceptor$intercept$2.invokeSuspend(EngineInterceptor.kt:66)
                                                                                                        at kotlin.coroutines.jvm.internal.BaseContinuationImpl.resumeWith(ContinuationImpl.kt:33)
                                                                                                        at kotlinx.coroutines.DispatchedTask.run(DispatchedTask.kt:101)
                                                                                                        at kotlinx.coroutines.internal.LimitedDispatcher$Worker.run(LimitedDispatcher.kt:113)
                                                                                                        at kotlinx.coroutines.scheduling.TaskImpl.run(Tasks.kt:89)
                                                                                                        at kotlinx.coroutines.scheduling.CoroutineScheduler.runSafely(CoroutineScheduler.kt:589)
                                                                                                        at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.executeTask(CoroutineScheduler.kt:823)
                                                                                                        at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.runWorker(CoroutineScheduler.kt:720)
                                                                                                        at kotlinx.coroutines.scheduling.CoroutineScheduler$Worker.run(CoroutineScheduler.kt:707)

I prefer using "Coil" instead of "Glide" for this small tasks but I don't know why it is not working. I humbly request you to help me solve this problem.

My Coil code is :

val imageLoader = ImageLoader.Builder(LocalContext.current)
                    .logger(DebugLogger())
                    .diskCachePolicy(CachePolicy.ENABLED)
                    .build()

                AsyncImage(
                    model = ImageRequest.Builder(LocalContext.current)
                        .data("https://cdn.pixabay.com/photo/2024/11/24/06/33/fireworks-9220290_960_720.jpg")
                        .build(),
                    imageLoader = imageLoader,
                    placeholder = painterResource(R.drawable.audio_icon),
                    error = painterResource(id = R.drawable.info_image),
                    contentDescription = "Profile Fhoto",
                    contentScale = ContentScale.Crop,
                    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)
                        .border(1.5.dp, MaterialTheme.colorScheme.primary, CircleShape)
                )

Glider code is :

GlideImage(
                    imageModel = { "https://cdn.pixabay.com/photo/2024/11/24/06/33/fireworks-9220290_960_720.jpg" },
                    imageOptions = ImageOptions(contentDescription = "Fireworks"),
                    loading = {
                        CircularProgressIndicator(color = Color.Gray)
                    },
                    failure = {
                        // Show a placeholder or error content
                        Box(modifier = Modifier.size(200.dp)) {
                            androidx.compose.material3.Text(text = "Image Failed")
                        }
                    }
                )

These are the versions I am using:

coilCompose = "3.0.4"
glide = "4.15.1"

Solution

  • By default, Coil doesn't have network download support.

    See https://coil-kt.github.io/coil/network/

    You need to add a dependency on:

    implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.4")