React(TypeScript)项目中棋盘棋子图片无法渲染，求排查方向

核心问题：Tile组件未渲染传入的图片 #

你的Tile组件虽然接收了image属性，但在返回的JSX里完全没有使用这个属性——不管黑格还是白格都只返回了空的div，这就是棋子图片看不到的直接原因。

修复Tile组件 #

修改Tile组件代码，在格子容器内添加图片标签，当image存在时渲染棋子：

import './tile.css';

interface props{
    image?: string;
    number: number;
}

export default function Tile({image, number}: props){
    const tileClass = number % 2 === 0 ? "tile black-tile" : "tile white-tile";
    
    return (
        <div className={tileClass}>
            {image && <img src={image} alt="棋子" className="piece" />}
        </div>
    );
}

同时建议给棋子图片添加CSS样式，确保它适配格子大小：

.piece {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

其他潜在问题排查 #

1. 坐标映射逻辑验证
   你的Chessboard组件中，j从verticalAxis.length - 1（即7）倒序遍历，对应棋盘行是从8到1。你当前添加的棋子y:1，对应j=1（即verticalAxis[1] = 2，也就是从下往上数第2行）。如果你的预期是棋子在黑方pawn的初始位置（从上往下数第7行），需要调整pieces里的y值为6：

   pieces.push({ image: "/images/black_pawn.png", x: 0, y: 6 });
   

2. 优化棋子查找逻辑
   当前用forEach遍历所有棋子匹配坐标，效率较低，建议改用find方法直接定位对应位置的棋子：

   const piece = pieces.find(p => p.x === i && p.y === j);
   const image = piece?.image;
   

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