不管“ src”，图总是被破坏吗？

Question

我正在使用Google的“复杂网格”的React示例（找到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”，它看起来都是这样的：

如您所见，图像已损坏。我已经检查过该路径绝对正确。我可能会缺少什么？

Answer 1

要获取完全限定的图像路径，请使用require，即：

imgPath={require("../img/games/testimg.png")}