'Image on Material UI 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>

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?

reactjs material-ui

Solution 1:^[1]

I had the Same Issue. Finally Got it Working doing this:

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

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

Solution 2:^[2]

I have read the docs and also notice that you have to specify the height to display images. While they say you should create a component with style I feel that a simpler way of doing it is by using the style prop directly:

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

The other options would be to create a style object first and then render the component withStyle as the docs said:

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

Solution 3:^[3]

to set fallback image on CardMedia, you can try this:

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

Solution 4:^[4]

I was facing the same issue. A good workaround would be to use the 'img' element along with the 'src' attribute inside the CardMedia body instead of passing it as an attribute to the CardMedia.

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

And while passing the props to the class I sent the image path as an object. In your case, suppose recipe is an object with thumbnail as one of the attributes. Then in the parent class, I would write the prop as:

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

Here I am sending the path of the image as an object. This worked for me.

Solution 5:^[5]

After updating from 4.9 => 4.12

add component="img" prop

(it had 0 height in DOM after the update despite setting it to 200px)

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

Solution 6:^[6]

In my case it worked after changing the value of height other than 0 in the style

Not Worked:

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

Worked:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kevin Danikowski
Solution 2	Alexander Luna
Solution 3	Vaibhav
Solution 4	Supreeth Baliga
Solution 5	Kevin Danikowski
Solution 6	Hoppo

'Image on Material UI CardMedia

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]