best way to get a profile image for each message in Firebase

I have the following case, I make a chat and use Firebase as a backend, I want to find the best solution to the next problem. If a group chat is open, each incoming message should have a sender profile image. Chat is divided into three structures, this is the conversation, userConversation, and message model. The Message Model contains only the senderID, since I find it not advisable to store the profileImageURL since the user can change the avatar. The second option I thought of was to save the profileImageURL in the Conversation model and when the user changes the avatar to change it using cloud functions this will work, but this is a very bad decision because of the resource costs (for example if the user has 300 conversations and he will change the avatar every day) . Please tell me, what is the best way to do this situation?

Message model

"-KmfKFxY2BsLjpGixowG" : {
"conversationID" : "-KmfK4m1t2nDKFX_MZr8",
"creationTimeStamp" : 1.497523097283577E9,
"id" : "-KmfKFxY2BsLjpGixowG",
"senderID" : "xpyM19QVjJTgrtdntlbcJPkb0jB2",
"sendingStatusIndex" : 0,
"textMessage" : "3reds",
"typeIndex" : 0
},

Conversation Model



"-KmfK4m1t2nDKFX_MZr8" : {
"id" : "-KmfK4m1t2nDKFX_MZr8",
"lastMessage" : {
"conversationID" : "-KmfK4m1t2nDKFX_MZr8",
"creationTimeStamp" : 1.497591480636771E9,
"id" : "-KmjP72nyEJUX7yQmwYp",
"senderID" : "AoG6HmxXE8ahAESx98C2UZ0ieAh1",
"sendingStatusIndex" : 0,
"textMessage" : "C",
"typeIndex" : 0
},
"typeIndex" : 0,
"userAcitivities" : [ {
"removedChatTimeStamp" : 0,
"userID" : "xpyM19QVjJTgrtdntlbcJPkb0jB2"
}, {
"removedChatTimeStamp" : 0,
"userID" : "AoG6HmxXE8ahAESx98C2UZ0ieAh1"
} ]
}

User conversation model



"AoG6HmxXE8ahAESx98C2UZ0ieAh1" : {
"-KmeqR8RYXo-5Pt0gue1" : {
"friendID" : "QscqImQoCGdAciaVMoRJN35KjEH2",
"id" : "-KmeqR8RYXo-5Pt0gue1",
"removedChatTimeStamp" : 0,
"typeIndex" : 0
},


**Update description:**

Hello! I'm doing the chat! Firebase is used as a backend. The problem is how to best upload user images in a group chat. The message model has a senderID, of course in the application. The worst option that came in (I will not use it) in each cell is to query the latest url and load and cache the image using Kingfisher. The second option at the time of launching the application / chat is to update or upload all the avatars of the users that are available in the chat rooms, but here there are two problems. The first problem, if the chat will be 50 and in each chat for 50 users, then doing 2500 queries at a time is also not an option. The second problem, if somehow to avoid, a lot of requests, then from this data it will be possible to make a dictionary and transfer it to a cell, and there by senderID get the actual url for Kingfisher, but I think it's awful, and Plus can say on performance. The simplest examples of this or that chats based on firebase.

There are also several options, but they are all bad. Can you advise how this is best done? Or where to find and read about the correct architecture of this "module".

I solved this issue as follows, when opening ChatViewController, I request links to all user images using cloud functions and I get the ready dictionary [userID: userAvatarPath] in the application.

const functions = require('firebase-functions');
const admin = require('firebase-admin');

module.exports = functions.https.onRequest((req, res) => {

const conversationID = req.query.conversationID;
const currentUserID = req.query.currentUserID;

console.log("conversationID", conversationID, "currentUserID", currentUserID);

const conversationUsersRef = admin.database().ref("chat").child("conversationUsers").child(conversationID);
conversationUsersRef.once("value").then(conversationUsersRefSnap => {
var index = 0;
var totalIndex = 0;
var conversationUsersImagesArray = [];
conversationUsersRefSnap.forEach(function(conversationUserSnap) {
console.log("conversationUserSnap", conversationUserSnap.val());
console.log("$index", index);
const dict = conversationUserSnap.val();
const conversationUserID = dict["userID"];
if (conversationUserID != currentUserID) {
index += 1;
const userSenderImageQuery = admin.database().ref('userImages').child(conversationUserID).child('userProfileImages').orderByChild('timeStamp').limitToLast(1);
userSenderImageQuery.once('value', function (snapshot, error) {
var imagePath = '';
if (error) {
index -= 1;
if (conversationUsersImagesArray.length == index) {
console.log("total", conversationUsersImagesArray);
res.status(200).send(conversationUsersImagesArray);
};
} else {
if (snapshot.val()) {
const value = snapshot.val();
const key = Object.keys(value)[0];
const requestJSON = value[key];
console.log('senderImageQuery requestJSON', requestJSON);
const userImagePath = requestJSON['path'];
imagePath = userImagePath;
const compressPath = requestJSON["compressPath"];
if (compressPath) {
imagePath = compressPath;
};

conversationUsersImagesArray.push({"userID" : conversationUserID, "imagePath" : imagePath, "conversationID" : conversationID});
console.log("conversationUsersImages", conversationUsersImagesArray.length, "index", index);

if (conversationUsersImagesArray.length == index) {
console.log("total", conversationUsersImagesArray);
res.status(200).send(conversationUsersImagesArray);
};
} else {
index -= 1;
if (conversationUsersImagesArray.length == index) {
console.log("total", conversationUsersImagesArray);
res.status(200).send(conversationUsersImagesArray);
};
};
};
});
};
});
});
});

you can cache all user basic data which include user avatar in server so that the front-end get its own user list and store as object or hash table. whenever new message comes, you can map sender id with your user list data.
to update real time whenever a user change his/her avatar, you can register a socket event.