[FIXED] Coil: Loading image from firebase not working - "No fetcher supports"

Issue

 Image(
        modifier = Modifier.size(100.dp).padding(16.dp),
        painter = rememberImagePainter(
            ImageRequest.Builder(LocalContext.current)
 //                    .data("https://media-cldnry.s-nbcnews.com/image/upload/t_fit-760w,f_auto,q_auto:best/streams/2013/March/130326/1C6639340-google-logo.jpg")
                .data(Firebase.storage.getReference("<Redacted>"))
                .crossfade(false)
                .listener(object : ImageRequest.Listener {

                    override fun onError(request: ImageRequest, throwable: Throwable) {
                        super.onError(request, throwable)
                        Log.e("CoilRequest", "${throwable.message}")
                    }
                })
                .placeholder(getShimmerPlaceholder())
                .build()
        ),
        contentDescription = "description",
        contentScale = ContentScale.Fit
    )

The commented code is working when I use some random image from the web, but when I use a hosted image from firebase its not working on compose, and I'm having an error callback from coil

Unable to fetch data. No fetcher supports: gs://

Same approach is being used in view however it works.

inline fun ImageView.load(data: data: StorageReference, builder: ImageRequest.Builder.() -> Unit) : Disposable {
    val loadRequest = ImageRequest.Builder(context)
                      .data(data)
                      .target(this@load)
                      .apply(builder).build()
          return FireCoil.loader(context).enqueue(loadRequest)
}

Any help would be greatly appreciated. Thank you!

Edit: After digging more and trying different versions, it seems like I need to create a custom fetcher to consume a .webp format, I don't know why it works on ImageView but not on a Composable Image. Is there any link that can guide me how to create a custom fethcher for coil? Thank you.

Solution

URLs starting with gs:// are Google Cloud Storage's native URL format, and are not recognized by many common libraries - of which Coil is apparently one.

To display the data, you have two options:

• Generate a download URL for the image, which is a publicly readably URL starting with https://, and pass that to Coil instead.
• Download the file from the URL through the Firebase SDK, and then display the image in Coil based on the local file/data.

Answered By - Frank van Puffelen
Answer Checked By - David Marino (JavaFixing Volunteer)