Material UI CardMedia 上的图像

Question

我在从 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 高度。

有谁知道为什么会这样？

原文由 Marcelo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到过同样的问题。终于搞定了：

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


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

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

原文由 1nullpointer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我已阅读文档并注意到您必须指定显示图像的高度。虽然他们说你应该创建一个带有样式的组件，但我觉得更简单的方法是直接使用 style 属性：

 <CardMedia
  style={{height: 0, paddingTop: '56.25%'}}
  image={project.image}
  title="lorem ipsum"
/>

其他选项是首先创建一个样式对象，然后按照文档所述使用 Style 渲染组件：

 const styles = {
  card: {
    maxWidth: 345,
  },
  media: {
    height: 0,
    paddingTop: '56.25%', // 16:9
  },
};

function SimpleMediaCard(props) {
  const { classes } = props;
  return (
    <div>
      <Card className={classes.card}>
        <CardMedia
          className={classes.media}
          image="/static/images/cards/contemplative-reptile.jpg"
          title="Contemplative Reptile"
        />
      </Card>
    </div>
  );
}

export default withStyles(styles)(SimpleMediaCard);

原文由 Alexander Luna 发布，翻译遵循 CC BY-SA 4.0 许可协议