在板上传递图像

Question

你好，我已经在图像中创建了这个数据库。在 b_color（我有黑色或红色）。在 piece_color（红色和黑色）。在piece上，我有pawn1 (P1) 和pawn2(P2)。 所有这些都在mysql上。 在我的索引页面上，我创建了 2 个原始数据和 12 列，因此它将是 24 个框。我已经使用此代码创建了它。

$(function () {
    draw_empty_board();
    fill_board();
    $('#do_move').click(do_move);
    $('#chess_reset').click(do_reset);
});


function draw_empty_board() {
    var t='<table id="chess_table">';
    for(var i=2;i>0;i--) {
        
        t += '<tr>';
        t += '<td class="line_label">'+i+'</td>';
        for(var j=1;j<13;j++) {
            
        
            t += '<td class="chess_square" id="square_'+j+'_'+i+'">' + j +','+i+'</td>'; 
            
        }
        t+='</tr>';
    }
    t += '<tr><td class="column_label line_label"></td>';
    for(var j=1;j<13;j++) {
        
        t += '<td class="column_label">'+j+'</td>';
    }
    t+='</tr>';
    t+='</table>';
    
    $('#chess_board').html(t);
}

function fill_board() {
    $.ajax({url: "chess.php/board/", success: fill_board_by_data });
    
}

function fill_board_by_data(data) {
    for(var i=0;i<data.length;i++) {
        var o = data[i];
        var id = '#square_'+ o.x +'_' + o.y;
        var c = (o.piece!=null)?o.piece_color + o.piece:'';
        var im = (o.piece!=null)?'<img class="piece" src="images/'+c+'.png">':'';
        var im = c;
        $(id).addClass(o.b_color+'_square').html(im);
        
    }

代码正在运行。我想用两个图像填充这个板。 我创建了一个名为 images 的文件夹，所以我将拍摄照片并用这两个图像填充我的板。 https://p7.hiclipart.com/preview/143/606/545/clip-art-bullet-thumbnail.jpg 黑色 https://www.clker.com/cliparts/d/5/T/A/K/2/red-circle-hi.png 为红色。 我已将这些照片保存在 png 中，并且在 images 文件夹中。 问题是我认为我的数据库..

Answer 1

我希望这段代码对你有所帮助...我还建议使用 Css（点）作为图片的替代品。

  //Because I can't rename hosted images filenames
  //I'm using this color dictionary
  let colors={black:"https://i.imgur.com/dL3J8XS.jpeg",red:'https://i.imgur.com/ZEZLSOo.png'}
  //
  
  let items = [
  {
    "x": 1,
    "y": 1,
    "piece":"p",
    "piece_color": "black",
    "b_color": "black"
  },
  {
    "x": 12,
    "y": 2,
    "piece":"p",
    "piece_color": "red",
    "b_color": "red"
  }
  ];
  $(function () {
    draw_empty_board();
    fill_board();
    //$('#do_move').click(do_move);
    //$('#chess_reset').click(do_reset);
});

  function draw_empty_board() {
    var t='<table id="chess_table">';
    for(var i=2;i>0;i--) {
        
        t += '<tr>';
        t += '<td class="line_label">'+i+'</td>';
        for(var j=1;j<13;j++) {
            
        
            t += '<td class="chess_square" id="square_'+j+'_'+i+'"></td>'; 
            
        }
        t+='</tr>';
    }
    t += '<tr><td class="column_label line_label"></td>';
    for(var j=1;j<13;j++) {
        
        t += '<td class="column_label">'+j+'</td>';
    }
    t+='</tr>';
    t+='</table>';
    
    $('#chess_board').html(t);
}
function fill_board() {
    //$.ajax({url: "chess.php/board/", success: fill_board_by_data });
    //I'm a calling static data here
    fill_board_by_data(items);
    
}

function fill_board_by_data(data) {
    
    for(var i=0;i<data.length;i++) {

        var o = data[i];
        var id = '#square_'+ o.x +'_' + o.y;
        //var c = (o.piece!=null)?o.piece_color + o.piece:'';
        var c = (o.piece!=null)?o.piece_color:'';
        
        //$(id).append('<span class="'+c+'dot"></span>');
        var im = (o.piece!=null)?'<img class="piece" src="'+colors[c]+'.png">':'';
        $(id).addClass(o.b_color+'_square').html(im);
        
    }
}

  table{
    border-collapse:collapse;
    border:2px solid;
  }
  td{
    width:25px;
    height:25px;
    border:1px solid;
  }
  
  /*this is a suggested Css alternative to images */
.reddot {
  height: 25px;
  width: 25px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}
    .blackdot {
  height: 25px;
  width: 25px;
  background-color: #000;
  border-radius: 50%;
  display: inline-block;
}
img{width:25px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chess_board"></div>