Image isn't being loaded by Coil Kotlin Jetpack Compose

Question

I have this image I want to load, I am using coil in jetpack compose to try and load it yet it didn't load and just gave me an empty composable. Whenever I try to load a different image from any other website it works, yet when I use the same website I am loading this image from. It doesn't Work.

Here is My Code:

@Composable
fun BookItem(
    title: String,
    cover: String?,
    unreadChapters: Int,
) {

    Box(
        modifier = Modifier
            .wrapContentSize(),
        contentAlignment = Alignment.Center
    ) {
        AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data(cover)
                .crossfade(true)
                .build(),
            contentDescription = title,
            contentScale = ContentScale.Inside,
            modifier = Modifier
                .clip(RoundedCornerShape(size = 12.dp))
                .size(200.dp)
        )

    }
}

Here is the link: https://static.lightnovelworld.com/bookcover/300x400/01365-shadow-slave.jpg

I tried using glide instead of coil and I got the same problem.

Thanks and Regards

Embower

Answer 1

You can debug it using:

val imageLoader = LocalContext.current.imageLoader.newBuilder()
    .logger(DebugLogger())
    .build()

    AsyncImage(
        //...
        imageLoader = imageLoader,
    )

Result:

🚨 Failed - https://static.lightnovelworld.com/bookcover/300x400/01365-shadow-slave.jpg - coil.network.HttpException: HTTP 403:

You can try to add some headers in you requests using something like:

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

Illicit

Thank you! I got a similar error when I tried using j soup to parse HTML on that same website. I was able to fix it using "referrer("google.com")" and ".userAgent("Mozilla/5.0")" functions when requesting the URL, Is there anything similar to those functions when requesting a URL in coil? – Embower

@Embower I am not sure but you can add .setHeader in your model or you can add and okhttpclient to the ImageLoader – Illicit

Thanks a lot! It worked, adding the ".setHeader("User-Agent", "Mozilla/5.0")" piece of code to the model worked! – Embower

Thanks. .setHeader("User-Agent", "Mozilla/5.0") helps resolve some issues. What does it really do? Is there a problem to call setHeader on every ImageRequest, or should I better call it on certain situations? – Hitlerism