GlideException: Failed to load resource

[Berki2021]

Describe your environment

• Android device: Google Nexus 5X API29 x86 Emulator
• Android OS version: 10
• Google Play Services version: I don't know
• Firebase/Play Services SDK version: I don't know
• FirebaseUI version: 6.3.0

Step 3: Describe the problem:

I am trying to load an Image from my firebase storage and show it in my Cardview, but it doesn't work. The only thing I get is: class com.bumptech.glide.load.engine.GlideException: Failed to load resource

Steps to reproduce:

1. Add Glide and Firebase UI as Dependencies
2. Get StorageReference from Firebase Cloud Firestore
3. Try to download Image with Firebase Ui and Glide

Observed Results:

com.example.app W/Glide: Load failed for gs://censored.appspot.com/products/images/censored-SET_an238386.png with size [433x289] class com.bumptech.glide.load.engine.GlideException: Failed to load resource

Expected Results:

• The Image should be shown.

Relevant Code:

• XML

```xml

<data>
    <variable
        name="product"
        type="com.example.app.framework.datasource.models.product.Product" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/mcv_product_item"
        android:layout_width="165dp"
        android:layout_height="210dp"
        android:layout_marginTop="12dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/iv_product_image"
                android:layout_width="165dp"
                android:layout_height="110dp"
                android:contentDescription="TODO"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:loadImage="@{product.images[0]}" <-- Trying to load Image here
                tools:src="@drawable/ic_calibrate" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/tv_product_name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginTop="12dp"
                android:layout_marginEnd="8dp"
                android:ellipsize="end"
                android:maxLines="2"
                android:text="@{product.name}"
                app:layout_constraintEnd_toEndOf="@+id/iv_product_image"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="@+id/iv_product_image"
                app:layout_constraintTop_toBottomOf="@+id/iv_product_image"
                tools:text="Test Name" />

            <com.google.android.material.textview.MaterialTextView
                android:id="@+id/tv_product_price"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="12dp"
                android:text="@{product.price}"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="@+id/tv_product_name" />


        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>

```

• Data Class

data class Product(
    val name: String = "",
    val price: Float = 0F,
    val category: String = "",
    val note: String = "",
    val articelNumber: Int = 0,
    val images: ArrayList<String> = arrayListOf(),
    val description: ArrayList<ProductDescription> = arrayListOf(),
    val technicalDescription: ArrayList<ProductDescription>? = arrayListOf(),
    val hasAccessories: Boolean = false
)

data class ProductDescription(
    val category: String = "",
    val body: String = "",
)

• Glide Binding Adapter

@BindingAdapter("loadImage")
fun setImageFromUrl(view: ImageView, url: String?) {
    if (!url.isNullOrEmpty()) {
        GlideApp
            .with(view)
            .load(url)
            .fitCenter()
            .apply(RequestOptions.bitmapTransform(RoundedCorners(4)))
            .into(view)
    } else {
        Timber.d("Oh, Something went wrong!")
    }
}

• Glide AppModule

@GlideModule
class GlideAppModule : AppGlideModule() {
    override fun registerComponents(context: Context, glide: Glide, registry: Registry) {
        super.registerComponents(context, glide, registry)
        registry.append(StorageReference::class.java, InputStream::class.java, FirebaseImageLoader.Factory())
    }
}

• Dependencies

implementation "com.firebaseui:firebase-ui-storage:6.3.0"
implementation "com.github.bumptech.glide:glide:4.11.0"
kapt "com.github.bumptech.glide:compiler:4.11.0"
kapt "com.github.bumptech.glide:annotations:4.11.0"

I also have to state that this problem is 100% on the firebase side as I have already discussed this with the glide developers..

[samtstern]

@Berki2021 it's really not clear that this is a bug in FirebaseUI. Are you sure that: a) The file exists at that location b) You have permission to retrieve it

Try using the Cloud Storage SDK without FirebaseUI and see if that works: https://firebase.google.com/docs/storage/android/download-files

If it also fails then it's not a FirebaseUI issue.

[Berki2021]

Yes, the file exists at the location and yes I have permissions to retrieve it. Yes, using the Cloud Storage SDK without Firebase UI works.

My storage reference is: gs://example.appspot.com/products/images/censored/Censored-Censored-BIG_an326331.png

Someone at Stackoverflow suggested to just use the filename instead of the reference, e.g: Censored-Censored-BIG_an326331.png, but using this approach will give me an java.io.FileNotFoundException

Stackoverflow Question

[theriyazo]

I faced the same issue: I could not load the image into view. Only the placeholder was shown all the time.

After trying all other solutions on the StackOverFlow, nothing actually worked for me.

While closely studying the errors, the issue I found was from Firebase, the image URL that was retrieved from firebase was a downloadable URL(When you launch the URL on the browser the file starts downloading).

So I used the HTTPS reference of the same image URL.

Https Reference

val httpsReference = Firebase.storage.getReferenceFromUrl("https://firebasestorage.googleapis.com/b/bucket
/o/images%20stars.jpg")

Usage with Glide

val httpsReference = Firebase.storage.getReferenceFromUrl("https://firebasestorage.googleapis.com/b/bucket
/o/images%20stars.jpg")

Glide.with(context)
    .load(httpsReference)
    .placeholder(R.drawable.logo)
    .dontAnimate()
    .into(holder.horseImage)