不管“ src”,图总是被破坏吗?

时间:2018-12-29 07:23:07

标签: javascript reactjs material-ui

我正在使用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”,它看起来都是这样的: enter image description here

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

1 个答案:

答案 0 :(得分:1)

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

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