Я только, что пробовал... оно работает, поэтому я и написал так... Когда пришло сообщение, то сначала нужно загрузить картинки, и только после их загрузки отобразить сообщение в чате
function template(data) {
if(data) {
var imagePromises = (data.img || []).map(function(src) {
var html = `
<div class="chat__list-box-img chat__list-box-img_file">
<img class="chat__list-img" src="/img/${src}" role="presentation">
</div>
`;
return new Promise(function(resolve) {
var image = new Image();
image.src = "/img/" + src;
image.onload = image.onerror = function() {
resolve(html);
};
});
});
var time = moment.unix(data.timestamp).format('hh:mm');
return Promise.all(imagePromises).then(function(html) {
var img = html.join("");
return `
<div class="chat__list-item" data-id="${data.id}">
<div class="chat__list-col chat__list-col_1">
<div class="chat__list-box-img chat__list-box-img_user">
<img class="chat__list-img" src="/img/${data.imgAvatar}" alt="" role="presentation">
</div>
</div>
<div class="chat__list-col chat__list-col_2">
<div class="chat__list-row chat__list-row_1">
<div class="chat__list-name">${data.name}</div>
<div class="chat__list-time">${time}</div>
</div>
<div class="chat__list-row chat__list-row_2">
<div class="chat__list-text ${data.status == 'true' ? '' : 'chat__list-text_error'}">
${data.status == 'true' ? data.text : 'Error'}
</div>
${img}
</div>
</div>
</div>
`;
});
} else {
return Promise.reject(new Error("No data"));
}
}
вот так вызывал
template({
"id":"250",
"status":"true",
"imgAvatar": "avatar_client.png",
"name": "0",
"timestamp": "1533568371",
"text": "122 abc",
"img": ["uploads/KzejvJellyfish.jpg"]
}).then(function(html) {
document.getElementById('chat__list-out').insertAdjacentHTML("beforeEnd", html);
$('#chat__list').scrollTop($('#chat__list-out').height());
});