材质UI CardMedia上的图像

本文介绍了材质UI CardMedia上的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I´m having some troubles on getting an image from props on a CardMedia image:

<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的高度.

It just doesnt render at all the images; all the other props values are rendered as they has to.Also as Material UI I had specified the CardMedia height on a JS css.

有人知道为什么会这样吗?

Does anyone knows why this happens?

推荐答案

好，发生了同样的问题.终于成功了.

Ok ,Had the Same Issue . Finally Got it Working .

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 -没有加载图像的选项.图片位置是我的本地

You can also check :https://codesandbox.io/s/9zqr09zqjo - No option to load images . The image location is my local

这篇关于材质UI CardMedia上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！