使用chessboard.js时棋子不显示的问题求助

问题分析 #

核心原因是棋子资源路径不匹配，导致库无法加载到棋子图片。从你的目录结构和代码来看：

• HTML文件存放在public/pages目录下
• 棋子图片在项目根目录的img/chesspieces/wikipedia文件夹中
• 代码里用了绝对路径/img/...，若本地开发服务器默认把public设为根目录，这个绝对路径会直接指向public/img（不存在）；即便服务器根目录是项目根，当前HTML页面的相对路径也不正确。

解决方案 #

1. 修正pieceTheme路径配置

将JS中的路径改为相对于当前HTML文件的相对路径：

var config = {
  pieceTheme: '../../img/chesspieces/wikipedia/{piece}.png',
  position: 'start'
}
var board1 = Chessboard('board1', config);

解释：从public/pages目录往上退两级（../回到public，再../回到项目根目录），就能正确定位到img文件夹。

2. 确认棋子文件名格式正确

检查wikipedia文件夹内的图片文件名，必须严格匹配Chessboard.js的命名规则：

• 文件名是两个字符：第一个为w（白棋）或b（黑棋），第二个为棋子类型（P兵、R车、N马、B象、Q后、K王）
• 正确示例：wP.png、bK.png、wN.png

3. 验证图片可访问性

在浏览器地址栏直接输入图片的相对路径（比如从当前HTML页面访问../../img/chesspieces/wikipedia/wP.png），如果能正常显示图片，说明路径配置正确；若不能，检查：

• 图片是否确实放在了对应目录中
• 文件名是否拼写错误（注意大小写，区分大小写的系统中wp.png和wP.png是不同文件）

额外提示 #

如果你的开发服务器默认把public设为根目录，也可以将img文件夹移动到public目录下，此时路径可改为/img/chesspieces/wikipedia/{piece}.png；或者通过服务器配置，将/img路径映射到项目根目录的img文件夹。

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