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

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

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

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

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

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

要在 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}
/>

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

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

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

...
recipe = {
  .
  .
  thumbnail: require('assets/images/img1.jpg'),
  //make sure the path of the image is relative to parent class where you are defining the prop 
  .
  .
}
...

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