Images from firestore are not displayed?

Question

I tried all the options, but I couldn't display images from the database. The question is why are the images not displayed?

Data

data class ArtWallpaper (
       val Name: String = "",
       val Link: String = "",
       val Id: String = ""
       )

FirebaseModule

@Module
@InstallIn(SingletonComponent::class)
object FirebaseModule {

    @Provides
    @Singleton
    fun providesFirebaseFirestore(): FirebaseFirestore = Firebase.firestore
}

RepositoryImpl

   override fun getWallpapersRealtime(): Flow<Resource<List<ArtWallpaper>>> = callbackFlow {       
        val docRef = db.collection("Category")
        
        val listener =  docRef.addSnapshotListener { snapshot, e ->
            if (e != null) {
                /* TODO: Handle the error */
                return@addSnapshotListener
            }

            if (snapshot != null) {               
                val cars = snapshot.toObjects<ArtWallpaper>(ArtWallpaper::class.java)
               
                trySend(Resource.Success<List<ArtWallpaper>>(data = cars)).isSuccess
            }
        }

        awaitClose {           
            listener.remove()
            close()       n  
        }
    }

MainViewModel

@HiltViewModel
class MainViewModel @Inject constructor(
    private val artWallpapersRepository: ArtWallpapersRepository
) : ViewModel() {

    // List of cars
    private var _cars = mutableStateOf<List<ArtWallpaper>>(emptyList())
    val cars: State<List<ArtWallpaper>> = _cars

    init {
        // The function will be called when the viewModel gets called
        artWallpapersRepository.getWallpapersRealtime()
            // onEach will trigger whenever a new value is retrieved
            .onEach { resource ->
                when (resource) {
                    is Resource.Error<*> -> {
                        /* TODO: Handle the error */
                    }

                    is Resource.Success<*> -> {
                        _cars.value = resource.data!!
                    }
                }
            }.launchIn(viewModelScope)
    }
}

display

@Composable
fun HomeScreen(viewModel: MainViewModel = hiltViewModel()) {
    LazyColumn {
        items(viewModel.cars.value) { artWallpaper ->
            CardItem(artWallpaper)
        }
    }
}

@Composable
fun CardItem (artWallpaper: ArtWallpaper) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .height(650.dp)
            .padding(20.dp)
    ) {
        Box(modifier = Modifier.fillMaxSize()) {
            AsyncImage(
                model = ImageRequest.Builder(LocalContext.current).data(artWallpaper.Link).build(),
                modifier = Modifier.fillMaxSize(),
                contentDescription = "My content description",
                contentScale = ContentScale.FillWidth
            )
            artWallpaper.Name.let {
                Text(
                    text = it,
                    fontSize = MaterialTheme.typography.h5.fontSize,
                    modifier = Modifier
                        .align(Alignment.BottomCenter)
                        .fillMaxWidth()
                        .background(Color.Red),
                    textAlign = TextAlign.Center,
                    color = Color.White
                )
            }
        }
    }
}

Screen link enter image description here

Database enter image description here

Answer 1

The problem in your code lies in the fact that the getters in the class are looking for fields that start with a lowercase letter, and in the database, you don't have such fields. All fields in the database start with a capital letter. Remember, that Firebase always tries to map the properties in the documents from Firestore in the fields that exist in your classes using JavaBean naming conventions.

So if you want to follow the convention, you should name the fields in the class and the fields in the database to start with a lowercase letter, or use annotations like below:

@get:PropertyName("Name")
@set:PropertyName("Name")
@PropertyName("Name")
var Name: String? = null,
//other fields.