Has anyone experienced an issue with Coil3 display...

# multiplatform

[youssef hachicha]

Has anyone experienced an issue with Coil3 displaying blank images? I'm fetching images from an API, downloading them to internal storage, and then using Coil3 to display them. However, some images randomly appear blank (there is no issue with the image itself), and I can't figure out why. I’ve tried debugging the issue with no luck. Could this be caused by job cancellation, or perhaps something related to how I’m downloading the images to internal storage?

[chrisjenx]

Not noticed this myself? Any specific platform?

[youssef hachicha]

nope not really it happens both in Android and Ios, I believe it is because of cancellation

[chrisjenx]

Oh maybe

[chrisjenx]

I pass in an imageLoader like this:

val imageLoader = remember {
        ImageLoader(context).newBuilder().components { add(ImgixSizingInterceptor) }.build()
    }

[chrisjenx]

But it's next to the

SubcomposeAsyncImage

and not root level

[youssef hachicha]

thanks for providing that, but what is ImgixSizingInterceptor and how could this help ?

[chrisjenx]

Oh ignore that. That's something we do

[youssef hachicha]

how about using a custom ImageLoader how could that help

[chrisjenx]

AFAIK the image loader should continue in the background regardless of if the view is recomposed. Honestly not dug in allot as it normally just works for the most part 😕

[chrisjenx]

I would simplify your composables and layers and see when the issue arrives

[youssef hachicha]

Ok thanks a lot for the advice

[youssef hachicha]

I dug into the issue and found that the image loading fails because of the following error:

Failed to create image decoder with message 'unimplemented'. Input contained an error.

Additionally, I was able to locate the ImageRequest for the failed images, so at least I can now redownload them. Here's the ImageRequest of one of the failed images:

kotlin
ImageRequest(
    context = packageName.activities.AppActivity@dc8156a,
    data = /data/user/0/packageName/files/images/https___www.dropbox.com_scl_fi_tp3vnv117uncyp7ga0rgx_page337.png,
    target = coil3.compose.AsyncImagePainter$updateRequest$$inlined$target$default$1@76c5374,
    listener = null,
    memoryCacheKey = null,
    memoryCacheKeyExtras = {},
    diskCacheKey = null,
    fileSystem = NioSystemFileSystem,
    fetcherFactory = null,
    decoderFactory = null,
    interceptorDispatcher = Dispatchers.Unconfined,
    fetcherDispatcher = <http://Dispatchers.IO|Dispatchers.IO>,
    decoderDispatcher = <http://Dispatchers.IO|Dispatchers.IO>,
    memoryCachePolicy = ENABLED,
    diskCachePolicy = ENABLED,
    networkCachePolicy = ENABLED,
    placeholderMemoryCacheKey = null,
    placeholderFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
    errorFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
    fallbackFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
    sizeResolver = coil3.compose.internal.ConstraintsSizeResolver@eb532e0,
    scale = FILL,
    precision = INEXACT,
    extras = Extras(data = {coil3.Extras$Key@c04b320=GlobalLifecycle}),
    defined = Defined(
        fileSystem = null,
        interceptorDispatcher = null,
        fetcherDispatcher = null,
        decoderDispatcher = null,
        memoryCachePolicy = null,
        diskCachePolicy = null,
        networkCachePolicy = null,
        placeholderFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
        errorFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
        fallbackFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
        sizeResolver = coil3.compose.internal.ConstraintsSizeResolver@eb532e0,
        scale = FILL,
        precision = INEXACT
    ),
    defaults = Defaults(
        fileSystem = NioSystemFileSystem,
        interceptorDispatcher = Dispatchers.Unconfined,
        fetcherDispatcher = <http://Dispatchers.IO|Dispatchers.IO>,
        decoderDispatcher = <http://Dispatchers.IO|Dispatchers.IO>,
        memoryCachePolicy = ENABLED,
        diskCachePolicy = ENABLED,
        networkCachePolicy = ENABLED,
        placeholderFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
        errorFactory = quran.ui.components.page.QuranImageKt$QuranImage$4$$ExternalSyntheticLambda4@16015b,
        fallbackFactory = coil3.util.Utils_commonKt$EMPTY_IMAGE_FACTORY$1@e61912,
        sizeResolver = RealSizeResolver(size = Size(width = Undefined, height = Undefined)),
        scale = FIT,
        precision = EXACT,
        extras = Extras(data = {})
    )
)

[chrisjenx]

That's a new one I would createa ticket with a stacktrace if possible. You did add the ktor client right?

[youssef hachicha]

What do you mean by 'you added the Ktor client'? I’m using Ktor to send requests, receive responses, etc., but am I explicitly telling Coil to use Ktor? I don’t think so.

[chrisjenx]

As in you added the coil ktor client dependency?

[youssef hachicha]

Nope i don't have that right now.

[youssef hachicha]

oh nope i do have it

coil-network = { module = "io.coil-kt.coil3:coil-network-ktor", version.ref = "coil" }

[youssef hachicha]

I am not using it tho

[chrisjenx]

Yeah, no idea then. Open a ticket with the error you saw.. also try the images on a vanilla project so you can replicate the issue. (Removes any potential conflicts etc)

[chrisjenx]

I think it just looks for it on the claaspath

[chrisjenx]

Unimplemented does sound like something is missing/not setup so do double check you didn't miss something.

[youssef hachicha]

Regarding the Ktor network client, do I just need to ensure that the dependency is included?

[chrisjenx]

Check the docs