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

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