材质UI CardMedia上的图像

小编典典

材质UI CardMedia上的图像

reactjs

我在从CardMedia图片上的道具获取图片时遇到了一些麻烦：

<Card className={classes.card}>
    <CardMedia 
        className={classes.img}
        image={this.props.recipe.thumbnail}
    />
    <CardContent className={classes.content}>
        <Typography gutterBottom variant="headline" component="h2">
            {this.props.recipe.title}
        </Typography>
        <Typography component="p">
            {this.props.recipe.ingredients}
        </Typography>
    </CardContent>
    <CardActions>
        <Button 
            href={this.props.recipe.href}
            Recipe
        </Button> 
    </CardActions>
</Card>

它只是不渲染所有图像。所有其他props值将按需渲染。同样作为Material UI，我在JS css上指定了CardMedia的高度。

有谁知道为什么会这样吗？

阅读 423

2020-07-22

共1个答案

小编典典

好的，有同样的问题。终于成功了。

const styles = 
{

media: {
  height: 0,
  paddingTop: '56.25%', // 16:9,
  marginTop:'30'
}
  };


 <CardMedia
      className={classes.media}
      ***image={require('assets/img/bg2.jpg')}***
      title="Contemplative Reptile"
      **style={styles.media}**
    />

您还可以检查：https : //codesandbox.io/s/9zqr09zqjo-无选项加载图像。图片位置在我本地

2020-07-22