无论“SRC”是什么,IMG总是坏的?

我正在使用谷歌的“复杂网格”反应示例(发现 here )制作卡片式布局。

代码如下:

return (
    <div className={classes.root}>
        <Paper
            className={classes.paper}
            onMouseOver={this.handleMouseOver}
            onMouseOut={this.handleMouseOut}
            onClick={this.handleClick}
        >
            <Grid container spacing={16}>
                <Grid item>
                    <ButtonBase className={classes.image}>
                        <img className={classes.img} alt={imgAlt} src={imgPath}/>
                    </ButtonBase>
                </Grid>
                <Grid item xs={12} sm container>
                    <Grid item xs container direction="column" spacing={16}>
                        <Grid item xs>
                            <Typography gutterBottom variant="subtitle1">
                                {cardHeader}
                            </Typography>
                            <Typography gutterBottom>{cardShortText}</Typography>
                            <Typography color="textSecondary">Platforms: {cardPlatforms}</Typography>
                        </Grid>
                        <Grid item>
                            <Typography variant="subtitle1">{cardDate}</Typography>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Paper>
    </div>
);

在另一个类中,这个类应该包含这些组件的网格,我将传递一组变量作为属性,这样我就可以重用复杂的网格组件。下面是我的测试:

<ComplexCard
    imgAlt="alt text"
    imgPath="../img/games/testimg.png"
    cardHeader="Header"
    cardShortText="Short Description"
    cardPlatforms={[<FontAwesomeIcon key={Math.random()} size="lg" icon={faMicrosoft} />]}
    cardDate="2018"
/>

但不管我把它称为“imgpath”,它看起来都是这样的:

如你所见,图像被破坏了。我已经检查过这条路是绝对正确的。我可能会错过什么?