2
 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!

z.g.y
  • 5,512
  • 4
  • 10
  • 36
  • What does the URL of the image look like? Does it start with `gs://...`? Maybe this [resource](https://medium.com/firebase-tips-tricks/how-to-upload-an-image-to-cloud-storage-and-save-the-url-in-firestore-42711ca1df46) will help. It's written in Kotlin and uses Jetpack Compose. – Alex Mamo Aug 18 '22 at 09:26
  • Hi, I can't upload the exact path of the image due to its a path to a company file, but it starts with something that can't be read by compose, also I can't view the link you provided as it needed a medium upgraded account :( – z.g.y Aug 18 '22 at 09:30
  • Does it start with `gs://...`? – Alex Mamo Aug 18 '22 at 09:32
  • yep it does, `Unable to fetch data. No fetcher supports: gs://`. Im using `io.coil-kt:coil-compose:1.3.2` version – z.g.y Aug 18 '22 at 09:41
  • 1
    Have you tried to display the image using an URL that starts with `http://...`? – Alex Mamo Aug 18 '22 at 10:04
  • it doesn't show on the browser, fetching it via `ImageView` (non-compose) works thought. Not sure if I have to check some `network` configuration like `headers`?, but its just weird when the the firebase image is being loaded on `ImageViews` – z.g.y Aug 18 '22 at 10:08

1 Answers1

6

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:

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • Thank you @Frank, though I still need a few more tweaking with the `Uri!` for Coil to work with the `Composable Image`, I was able to fetch the image by explicitly supplying Coil with the hard coded string returned by the `Task` callback – z.g.y Aug 19 '22 at 02:11
  • Also I found that we are not exactly using Coil only, the project was using a separate library named `FireCoil` with `ImageViews` that looks like handling these things under the hood. – z.g.y Aug 19 '22 at 02:12
  • 1
    Ah, yeah that could be. There's a similar add-in in the FirebaseUI library to make Glide recognize the `gs://` URLs too. – Frank van Puffelen Aug 19 '22 at 02:37
  • Yes, it seems like any standard `Image Processing` libraries would have, or would require an additional plugin/add-on to fetch `firebase storage` images, anyway, thank you so much @Frank, really appreciate the help! – z.g.y Aug 19 '22 at 02:46