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>

它只是不会渲染所有图像;所有其他道具值都按原样呈现。另外，作为Material UI，我在JS css上指定了CardMedia高度。

有谁知道为什么会这样？

Answer 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 - 无法加载图片。图像位置是我的本地

Answer 2

我已经阅读了文档，还注意到您必须指定显示图像的高度。尽管他们说您应该使用样式创建一个组件，但我觉得一种更简单的方法是直接使用样式道具：

<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);

Answer 3

从 4.9 更新后 => 4.12

添加 component="img" 道具

（尽管将其设置为 0，但更新后它在 DOM 中的高度为 200px）

<CardMedia className={classes.pageMedia} component='img' image='/static/img.jpg' />

Answer 4

我面临着同样的问题。一个好的解决方法是在CardMedia正文中使用'img'元素和'src'属性，而不是将其作为属性传递给CardMedia。

print (df.iloc[df.sum(axis=1).argsort()])
   0   1
1  1   2
2  2   3
0  1  10

在将道具传递给类时，我将图像路径作为对象发送。在您的情况下，假设配方是一个具有缩略图作为属性之一的对象。然后在父类中，我将prop编写为：

<CardMedia>
 <img src={this.props.recipe.thumbnail} alt="recipe thumbnail"/>
</CardMedia>

在这里，我将图像的路径作为对象发送。这对我有用。

Answer 5

要在CardMedia上设置后备图片，您可以尝试以下操作：

import FALLBACK_IMAGE from 'src/assets/images/fallback_image.png';

const onMediaFallback = event => event.target.src = FALLBACK_IMAGE;
<CardMedia
 component="img"
 className={classes.media}
 image="/static/images/cards/contemplative-reptile.jpg"
 title="Contemplative Reptile"
 onError={onMediaFallback}
/>

Answer 6

就我而言，它在更改样式中的高度值（非0）后起作用

不起作用：

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

工作：

const styles = {
  card: {
    maxWidth: 345,
  },
  media: {
    height: "300px" or "10em",
    paddingTop: '56.25%', // 16:9
  },
};

Material UI CardMedia上的图像

6 个答案: