consumir dados da api no front end porém mostrando as informações separadas

Boa noite Senhores(as) gostaria de saber se alguem pode me ajudar com essa dúvida, a duvida é seguinte estou fazendo um site que recebe varios endpoints diferentes para pode exibir as informações conforme foi solicitado para mim porém o problema que eu tenho é o seguinte eu consumo um endpoint que recebe uma imagem em base 64 e crio os cards populando os mesmo com as informações da api se eu coloco o no src do card o dado que vem da api que no caso é o base 64 na hora que o card é criado ele demora alguns segundos para carregar e como eu listo cards de forma dinamica de uma forma que a quantidade de cards gerados varia de acordo com o dia e o mes por exemplo: se eu tenho 10 pessoas no mes eu exibo 10 cards no html consequentemente cada pessoa carregada no card tem uma foto e cada foto tem um base 64 e isso faz com que os cards demorem pra carregar então meus 10 cards que tem 10 imagens em base 64 demora uns 15 segundos para carregar na tela variando de acordo com o tamanho em b/kbytes da imagem e esse tipo de comportamente nao é o que desejo, eis agora a ajuda que preciso gostaria de saber se seria possivel eu carregar os cards e depois passa a imagem dentro do card para ser exibida no browser, ja tentei algumas soluções óbvias porém nao obtive sucesso, enfim é a primeira vez que faço uma postagem aqui e talvez nao tenha sido muito claro, peço desculpa de antemão por isso. Segue o código :

essa chamada é para fazer o get na url e pegar as pessoas que serão carregadas de acordo com o mes

export const carregaCardsNoIndexMes = async () => {
    let url = "localhost:80/pessoa/mes/" 
    let dataNova = new Date();
    let datames = (`${(dataNova.getMonth()+1)}`);
    let token = JSON.parse(localStorage.getItem('meuToken'));


    return fetch(`${url}${datames}`, {
            method: 'GET',
            mode: 'cors',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            }
        })
        .then(resp => {
            if (resp.status === 401) {
                refreshToken();
            }
            if (resp.ok) {
                return resp.json();
            }
            return resp.json();
        })
        .then(data => {
            return data;
        })
        .catch(err => {
            throw new Error(err, 'Nao foi possível conectar');
        })
};

aqui está a minha função que cria o html na tela usando os dados da requisição do código acima

import {  usuarioService } from "../service/Service.js";
export const fazCard = async ()=>{
 const criaNovoCard = (nome, dataNasc, id, caminhoFoto) => {
    const cardNovo = document.createElement('div') 
    cardNovo.setAttribute('class', 'card')

    if (caminhoFoto == null){
        const conteudoVazio= 
        `<div class="card-body">
            <div card-view>
            <img src="/front/img/user-avatar.png" id="${id}" class="container-fluid" alt="foto" data-foto">
                <div class="card-2">
                        <h3 class="card-text" style="font-size: 22px">${nome}</h3>
                        <p class="card-title">DATA DE ANIVERSÁRIO:${dataNasc}</p>
                </div>
            </div>
        </div>
        `
        cardNovo.innerHTML = conteudoVazio;
        return cardNovo
    }
    else{
        const conteudo = `
                    <div class="card-body">
                        <div card-view>
                        <img src="${caminhoFoto}" id="${id}" class="container-fluid" alt="foto" data-foto">
                            <div class="card-2">
                                    <h3 class="card-text" style="font-size: 22px">${nome}</h3>
                                    <p class="card-title">DATA DE ANIVERSÁRIO:${dataNasc}</p>
                            </div>
                        </div>
                    </div>
                    `
                    cardNovo.innerHTML = conteudo;
    }
    return cardNovo;
}

    try {
        const listaUsuario = await usuarioService.carregaCardsNoIndexMes();
        listaUsuario.forEach((item) => {
            card.appendChild(criaNovoCard( item.nome, item.dataNasc, item.id, item.caminhoFoto));
        });
    }
    catch(erro) {
        console.error(erro);
    }
}
const card = document.querySelector('#mostraCard');

Bom é isso espero que alguem possa me ajuda e que tenha sido claro sobre o meu problema. Obrigado