[JavaScript]Ajuda com carregamento de imagens

não se posso fazer perguntas sobre projetos que estamos elaborando por fora, mas vamos la:
parte do html
<div class="cards">
<div class="card" data-type="html">

<h2>HTML5</h2>
</div>
<div class="card" data-type="css">
<h2>CSS3</h2>

</div>
<div class="card" data-type="mongo">
<h2>Mongo</h2>
</div>
<div class="card" data-type="javascript">
<h2>Javascript</h2>
</div>
<div class="card" data-type="nodejs">
<h2>NodeJs</h2>
</div>
<div class="card" data-type="sql">
<h2>SQL</h2>
</div>
</div>
</div>

e agr parte do js:
const getCardContent = (title, type) => {

return `
<div class="card-content">
<h2>$</h2>
<img src="img/$.jpg" alt="$">

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor eum ipsa molestiae nesciunt nostrum porro
reprehenderit? Animi corporis deleniti dolore laborum, nemo pariatur temporibus voluptatem.
</p>


</div>
`;
}


AQUIIIIIIIIIIIIIIIIII: bom essa function retorna o conteudo para os cards após o click e tals, só que todos os cards retornaram o mesmo conteudo ;-; como posso alterar isso ? para que retornem conteudos especificos para o card