Image is not displayed with Coil's rememberAsyncImagePainter

Question

Image always gives me this error:

Error loading image (Ask Gemini)
java.lang.IllegalStateException: Unable to create a fetcher that supports: https://my_domain/assets/webdesign/images/flags/world/england.png

This is my composable function for displaying image imageUrl is good and when i check link image in browser is shown

Problem is I always get .error(R.drawable.ic_sport_default)

@Composable
fun FlagImage(
    imageUrl: URL?,
    contentDescription: String,
) {
    val headers = Headers.Builder()
        .add("Cookie", "demo_access=M5Slo246")
        .build()
    val model = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .placeholder(R.drawable.ic_sport_default)
        .error(R.drawable.ic_sport_default)
        .headers(headers).build()
    val painterModel = rememberAsyncImagePainter(model = model)
    Image(
        painter = painterModel,
        contentDescription = contentDescription,
    )
}

Answer 1

Changed the imageUrl parameter to a String to ensure compatibility with Coil’s data method. Additionally, you can log errors through the listener.

@Composable
fun MyScreen() {
    val imageUrl = "https://images.unsplash.com/photo-1551963831-b3b1ca40c98e"
    FlagImage(imageUrl = imageUrl, contentDescription = "Test Image")
}

@Composable
fun FlagImage(
    imageUrl: String?,
    contentDescription: String,
) {
    val headers = Headers.Builder()
        .add("Cookie", "demo_access=M5Slo246")
        .build()
    val model = coil.request.ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .placeholder(R.drawable.ic_launcher_background)
        .error(R.drawable.ic_launcher_foreground)
        .listener(
        onStart = { request -> Log.d("FlagImage", "Image request started: $request") },
        onSuccess = { request, metadata ->
            Log.d("FlagImage", "Image request successful: $request")
        },
        onError = { request, throwable ->
            Log.e("FlagImage", "Image request failed: $request")
        }
    )
        .headers(headers).build()
    val painterModel = rememberAsyncImagePainter(model = model)
    Image(
        painter = painterModel,
        contentDescription = contentDescription,
        modifier = Modifier.size(350.dp),
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyScreen()
}