テーブルに画像を動的に表示する方法は？

Question

次のスクリプトでデータを動的に変更するテーブルを作成しています。私はまた、グループ名の横のグループのそれぞれの画像を表示したい。グループ名が変更されると、画像も変更されます。

テーブルはまったく問題ありません。

画像ファイルは私のIDEにあるので、言及されたパスは正しいです。ただし、画像は表示されません。

<script> 
    //$, jQuery 

    var lookupTable = { 
    Palm: "PM", 
    Cedar: "CED", 
    Oak: "OA", 
    Chinar: "CHI" 
}; 

var setGroup = function(groupName) { 
    var t = jQuery('<div></div>').addClass('group'); 
    var tn = jQuery('<div></div>').addClass('group-name').appendTo(t); 
    jQuery('<img>').attr('src','/examples/media/images/'+ groupName.toLowerCase() + '.png').appendTo(tn); 
    jQuery('<span></span>').text(groupName).appendTo(tn); 

    return t; 
}; 

    $.getJSON('https://service_program', function(data){ 

     var taf = $('#item1').empty();  
     var tar = $('#item2').empty(); 
     var tat = $('#item3').empty(); 
     var tao = $('#item4').empty(); 


     jQuery.each(data, function(idx, game){ 

      if (game['Category'] === 1){ 
       var tr = $('<tr></tr>').appendTo(taf); 
      } else if (game['Category'] === 2) { 
       var tr = $('<tr></tr>').appendTo(tar); 
      } else if (game['Category'] === 3){ 
       var tr = $('<tr></tr>').appendTo(tat); 
      } else if (game['Category'] === 4){ 
       var tr = $('<tr></tr>').appendTo(tao); 
      } 

      $('<td></td>').text(game['group 1']).appendTo(tr); 
      $('<td></td>').text(game['group 2']).appendTo(tr); 
      $('<td></td>').text(game['itemName 1']).appendTo(tr); 
      $('<td></td>').text(game['itemName2']).appendTo(tr); 

     });   
    }); 

</script> 

どこが間違っていますか？

Answer 1

使用この：

$('<td></td>').$('<img>').attr('src','/examples/media/image/'+ groupName.toLowerCase() + '.png').appendTo(tr);