React国际象棋应用组件不显示，请求技术排查协助

开发React国际象棋应用时，添加棋子图片后原本可见的黑色方块消失，组件无法正常显示。已检查图片路径、排查.map()逻辑，但问题仍存在。

相关代码 #

React代码

import React from 'react';
import './App.css';

const horizontalLine = ["8", "7", "6", "5", "4", "3", "2", "1"];
const verticalLine = ["a", "b", "c", "d", "e", "f", "g", "h"];

const pieces = {
  "a1": "white-rook.png",
  "b1": "white-knight.png",
  "c1": "white-bishop.png",
  "d1": "white-queen.png",
  "e1": "white-king.png",
  "f1": "white-bishop.png",
  "g1": "white-knight.png",
  "h1": "white-rook.png",
  "a2": "white-pawn.png",
  "b2": "white-pawn.png",
  "c2": "white-pawn.png",
  "d2": "white-pawn.png",
  "e2": "white-pawn.png",
  "f2": "white-pawn.png",
  "g2": "white-pawn.png",
  "h2": "white-pawn.png",
  "a8": "black-rook.png",
  "b8": "black-knight.png",
  "c8": "black-bishop.png",
  "d8": "black-queen.png",
  "e8": "black-king.png",
  "f8": "black-bishop.png",
  "g8": "black-knight.png",
  "h8": "black-rook.png",
  "a7": "black-pawn.png",
  "b7": "black-pawn.png",
  "c7": "black-pawn.png",
  "d7": "black-pawn.png",
  "e7": "black-pawn.png",
  "f7": "black-pawn.png",
  "g7": "black-pawn.png",
  "h7": "black-pawn.png",
};


function App() {
  const Coloring = (ver, hor) => {
    return (ver.charCodeAt(0) % 2 === hor % 2) ? "black" : "white";
  };

  return (
    <div className="App">
      {horizontalLine.map((horizontals) => (
        verticalLine.map((verticals) => {
          const id = `${verticals}${horizontals}`;
          const piece = pieces[id];
          return (
            <div
              className={`square ${Coloring(verticals, parseInt(horizontals))}`}
              key={id}
              id={id}
            >
              {piece && <img src={`./pieces-basic-png/${piece}`} alt={piece} />}
            </div>
          );
        })
      ))}
    </div>
  );
}

export default App;

CSS代码

.App{
  width: 700px;
  display: flex;
  flex-wrap: wrap;
}

.square{
  width: 85px;
  height: 85px;
  box-sizing: border-box;
}

.piece{
  width: 85px;
  height: 85px;
}

问题截图 #

问题根源及解决办法 #

1. 缺少格子背景色样式

你的CSS里仅定义了.square的宽高，但未给.black和.white类设置背景颜色，这直接导致黑格无法显示。补充以下样式：

.black {
  background-color: #769656; /* 国际象棋黑格经典色 */
}
.white {
  background-color: #eeeed2; /* 白格经典色 */
}

2. 图片路径需调整

在React项目中，静态资源的路径规则需要注意：

• 若图片放在public文件夹下，使用绝对路径（去掉开头的./）：

  {piece && <img src={`/pieces-basic-png/${piece}`} alt={piece} className="piece" />}
  

• 若图片放在src文件夹里，需通过require引入：

  {piece && <img src={require(`./pieces-basic-png/${piece}`).default} alt={piece} className="piece" />}
  

3. 图片未应用样式

你在CSS中定义了.piece类来控制图片大小，但img标签未添加该类，导致图片可能超出格子或显示异常。给img加上className="piece"即可。

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