Search code examples
androidandroid-jetpack-composecoil

Coil didn't Loading Network Images in Jetpack Compose | Solution

I Have the Weather Api from weatherapi.com and The Api Gave us a Weather Condition Icon The Url of Icon is Look Like This From Response:-

How Icon Url Looks Like from Response:-

"condition": {
    "text": "Sunny",
    "icon": "//cdn.weatherapi.com/weather/64x64/day/113.png",
    "code": 1000
}

And I am Doing This In My Code

        // Temperature Condition Icon
        AsyncImage(
            model = ImageRequest.Builder(context)
                .data("https:${forecastDay.day.condition.icon}")
                /* or I Also Did Like This:- "http:${forecastDay.day.condition.icon}" */
                /*  And ALso This:- "https://cdn.weatherapi.com/weather/64x64/day/113.png" */
                .error(R.drawable.full_sun_icon)
                .build(),
            contentDescription = "Temp Condition Icon",
            contentScale = ContentScale.Crop,
            modifier = modifier
                .width(50.dp)
                .height(50.dp)
        )

I Add Log and I am getting the same Url that I am getting from the Response and I Added https or http in the Starting of Url But Not Working?

When I am Opening This Url in Chrome then Its Showing the Icon

And Its Showing the Error Icon. I don't Know Why?

I Also Added android:usesCleartextTraffic="true" in Manifest File and Then uninstall and then reinstall but Not Working?

I am Testing in My Real Device!

Solution

  • I got the image displayed from a link using coil3, check that image uploading over the internet is enabled in the module, if that doesn't help add logs.

    By default, Coil 3.x does not include support for loading images from the network. To add support for fetching images from the network import only one of the following:

    implementation("io.coil-kt.coil3:coil-network-okhttp:3.0.4") // Only available on Android/JVM.
implementation("io.coil-kt.coil3:coil-network-ktor2:3.0.4")
implementation("io.coil-kt.coil3:coil-network-ktor3:3.0.4")

    You can also use DebugLogger to get the error description:

    internal class AppAplication: Application(), SingletonImageLoader.Factory {

    override fun newImageLoader(context: PlatformContext): ImageLoader =
        ImageLoader(context)
            .newBuilder()
            .logger(DebugLogger())
            .build()

}