Search code examples
androidfirebase-storageandroid-jetpack-composecoilandroid-compose-image

Coil: Loading image from firebase not working - Unable to fetch data. No fetcher supports

 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 ideas? Thanks!

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: