表示されている文字列を画像に変換

Question

表示されている文字列を画像に変換したいと考えています。
今のコードでトランプの絵柄と数字がかかれているところにそれにあった画像を載せていきたいのですが、調べてもなかなか出てこなかったので教えていただけたらありがたいです。
例えば
クローバーの１だったらそこにクローバーの１の画像を差し込みたいです。

var trump = ["スペード","ダイヤ","ハート","クローバー"];
var number = [1,2,3,4,5,6,7,8,9,10,11,12,13]; 
var cards = [];

function Card(suit, num) {
  this.trump = suit;
  this.number = num;
}

//カードを配列に入れる
for (var i = 0; i < trump.length; i++) {
  for (var a = 1; a <= 13; a++) {
    var card = new Card(trump[i], a);
    cards.push(card);
  }
}

// シャッフルする関数
function shuffle(arrays) {
  var array = arrays.slice();
  for (var i = array.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random() * (i + 1));
    [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
  }
  return array;
}

// シャッフルして表示
function shuffleCard(){
  var shuffled = shuffle(cards);
  for (var i = 0; i < trump.length; i++) {
    var elem1 = document.createElement("tr");
    document.getElementById("wrap").appendChild(elem1);
    for (var j = 0; j < 13; j++) {
      var elem2 = document.createElement("td");
      elem2.innerHTML = shuffled[i*13+j].trump  + shuffled[i*13+j].number;
      document.getElementById("wrap").appendChild(elem2);
    }
  }
}

shuffleCard(); 

Answer 1

ちょっと仕様がわかりかねますが画像を予め用意しておいて
imgタグで画像を挿入するだけだと思いますが、画像である必要もないかも

<style>
.red{color:red;}
</style>
<table>
<tbody id="wrap">
</tbody>
</table>
<script>
var trump=["&spades;","&hearts;","&diams;","&clubs;"];
var number = ["A","2","3","4","5","6","7","8","9","0","J","Q","K"]; 
var cards = [];

function Card(suit, num) {
  this.trump = suit;
  this.number = num;
}
for (var i = 0; i < trump.length; i++) {
  for (var a = 1; a <= 13; a++) {
    var card = new Card(trump[i], number[a-1]);
    cards.push(card);
  }
}
function shuffle(arrays) {
  var array = arrays.slice();
  for (var i = array.length - 1; i >= 0; i--) {
    var randomIndex = Math.floor(Math.random() * (i + 1));
    [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
  }
  return array;
}
function shuffleCard(){
  var shuffled = shuffle(cards);
  for (var i = 0; i < trump.length; i++) {
    var elem1 = document.createElement("tr");
    document.getElementById("wrap").appendChild(elem1);
    for (var j = 0; j < 13; j++) {
      var elem2 = document.createElement("td");
      var color=["&hearts;","&diams;"].includes(shuffled[i*13+j].trump)?"red":"black";
      elem2.classList.add(color)
      elem2.innerHTML = shuffled[i*13+j].trump  + shuffled[i*13+j].number;
      document.getElementById("wrap").appendChild(elem2);
    }
  }
}
shuffleCard(); 
</script>