Image on Material UI CardMedia - reactjs

Question

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?

Answer 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

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

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

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

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

Answer 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
},
};

Answer 7

Try using src property instead of img property