在react(typescript)项目上未渲染图像

我正在做一个项目,使用react构建一个简单的棋盘UI进行练习。我遇到了一个问题,无法在特定的图块上渲染给定的块。有人能帮我找出潜在的问题所在吗?我已确保图像路径正确。它位于公用文件夹内的images文件夹中。

PS:我是初学者,我知道的不多。

//Typescript for react component

import './chessboard.css';
import Tile from "../Tiles/tile";


interface piece {
    image?: string;
    x: number;
    y: number;
}

const pieces: piece[] = [];
const horizontalAxis = ["a", "b", "c", "d", "e", "f", "g", "h"];
const verticalAxis = [1, 2, 3, 4, 5, 6, 7, 8];


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

export default function Chessboard() {
    let board = [];

    for (let j = verticalAxis.length - 1; j >= 0; j--) {
        for (let i = 0; i < horizontalAxis.length; i++) {
            const number = i + j + 2;
            let image = undefined;

            pieces.forEach(p => {
                if (p.x === i && p.y === j) {
                    image = p.image;
                }
            });
            
            board.push(<Tile  image={image} number={number} />);
        }
    }

    

    return <div id="chessboard">{board}</div>;
}





//TypeScript for tile component

import './tile.css';


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

export default function Tile({image, number}: props){
    if(number%2===0){
        return (<div className="tile black-tile"></div>)
    }else{
        return (<div className="tile white-tile"></div>)
    }
}