Async Image in WASM web project

[ssuukk]

Hi,

Is there any way to debug why AsyncImage failed? I'm using this piece of code:

            AsyncImage(
                model = ImageRequest.Builder(PlatformContext.INSTANCE)
                    .data(picUrl)
                    .crossfade(true)
                    .build(),
                contentDescription = "Thumbnail",
                modifier = Modifier.size(100.dp),
                alignment = Alignment.Center, // Center the image within its bounds
                contentScale = ContentScale.Fit, // Crop to fill the size
                onState = { state ->
                    when (state) {
                        is AsyncImagePainter.State.Loading -> {
                            debugLog("ImageThumbnailRow loading $picUrl")
                            // Optionally handle loading state
                        }

                        is AsyncImagePainter.State.Error -> {
                            debugLog("ImageThumbnailRow error $picUrl")
                            // Optionally handle error state
                        }

                        is AsyncImagePainter.State.Success -> {
                            debugLog("ImageThumbnailRow success $picUrl")
                            // Optionally handle success state
                        }

                        else -> {
                            debugLog("ImageThumbnailRow other event $picUrl: $state")
                            // Handle other states
                        }
                    }
                }
            )

And trying to load valid image urls (I can even click them in the browser console and they open), yet this code always fails with State.Error (but it does get into Loading). Is threre anything I can do to dig deeper?

[colinrtwhite]

State.Error has a throwable property that lists the error.

[ssuukk]

Hmmm... OK, what could that mean, then:

error http://127.0.0.1:8081/image/e392edbb-be9f-4a38-abe1-dc35ed5567b4_21_image_1.png, error=IllegalStateException: Unable to create a fetcher that supports: http://127.0.0.1:8081/image/e392edbb-be9f-4a38-abe1-dc35ed5567b4_21_image_1.png

Note that I can click the very link above and it just opens the picture in my browser...

I suspect some dependency is missing. I have those:

            implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha10")
            implementation("io.coil-kt.coil3:coil-compose-core:3.0.0-alpha10")
            implementation("io.coil-kt.coil3:coil-network-core:3.0.0-alpha10")

Are they right/enough for wasm project?

Edit: got it working like this:

            implementation("io.coil-kt.coil3:coil-compose:3.0.0-alpha10")
            implementation("io.coil-kt.coil3:coil-compose-core:3.0.0-alpha10")
            implementation("io.coil-kt.coil3:coil-network-core:3.0.0-alpha10")

            // potrzebne do urli
            implementation("io.coil-kt.coil3:coil:3.0.0-alpha10")
            implementation("io.coil-kt.coil3:coil-network-ktor3:3.0.0-alpha10")
            implementation("io.ktor:ktor-client-core-wasm-js:3.0.0-rc-1")

Maybe it's worth putting it in some docs?

[lifecoder99]

it is not working

[colinrtwhite]

@ssuukk There are already docs covering this here: https://coil-kt.github.io/coil/network/