使用chessboard.js仅显示棋盘未加载棋子，求问题排查

你的问题出在Chessboard的初始化参数格式不对，这个库不能直接把FEN字符串作为第二个参数传入，需要把它放在一个包含position属性的配置对象里。

另外还要确认：

• 你的chessboardjs-1.0.0目录下的images文件夹是否完整，里面要有所有棋子的png图片（比如wP.png、bR.png这类），因为棋盘是通过加载这些图片来显示棋子的，如果路径不对或者文件缺失，棋子也显示不出来。

修正后的代码如下：

<html>
<head>
    <title>Test chessboard.js</title>
    <link rel="stylesheet" href="chessboardjs-1.0.0/css/chessboard-1.0.0.css">

</head>
<body>

    <div id="myBoard" style="width: 400px"></div>

    <script src="jquery-3.6.3/jquery-3.6.3.js"></script>
    <script src="chessboardjs-1.0.0/js/chessboard-1.0.0.js"></script>
    <script>
        var ruyLopez = 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R'
        // 把FEN字符串放在position属性里，作为配置对象传入
        var board = Chessboard('myBoard', { position: ruyLopez })
    </script>
</body>

</html>

如果还是没显示棋子，检查一下图片路径：chessboard.js默认会从当前页面相对路径的images/目录找棋子，如果你把chessboard的资源放在子目录里，可能需要在初始化时指定pieceTheme参数来修正路径，比如：

var board = Chessboard('myBoard', {
  position: ruyLopez,
  pieceTheme: 'chessboardjs-1.0.0/images/{piece}.png'
})

内容的提问来源于stack exchange，提问作者flori10