我正在使用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”,它看起来都是这样的:
如您所见,图像已损坏。我已经检查过该路径绝对正确。我可能会缺少什么?
答案 0 :(得分:1)
要获取完全限定的图像路径,请使用require,即:
imgPath={require("../img/games/testimg.png")}