Imagen en material UI CardMedia

Solución:

Ok, tuve el mismo problema. Finalmente lo conseguí funcionando.

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}**
    />

También puede consultar: https://codesandbox.io/s/9zqr09zqjo – No hay opción para cargar imágenes. La ubicación de la imagen es mi local.

Leí los documentos y también noté que debes especificar la altura para mostrar las imágenes. Si bien dicen que debería crear un componente con estilo, creo que una forma más simple de hacerlo es usando el accesorio de estilo directamente:

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

Las otras opciones serían crear un objeto de estilo primero y luego renderizar el componente con Estilo como dicen los documentos:

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

Estaba enfrentando el mismo problema. Una buena solución sería utilizar el elemento ‘img’ junto con el atributo ‘src’ dentro del cuerpo de CardMedia en lugar de pasarlo como un atributo a CardMedia.

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

Y mientras pasaba los accesorios a la clase, envié la ruta de la imagen como un objeto. En su caso, suponga que la receta es un objeto con una miniatura como uno de los atributos. Luego, en la clase para padres, escribiría el accesorio como:

...
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 
  .
  .
}
...

Aquí estoy enviando el camino de la imagen como un objeto. Esto funcionó para mí.

---

---

Utiliza Nuestro Buscador