MUI: either `image` or `src` property must be specified - reactjs

Question

It's looks like CardMedia need an image while component is created. Since I am pulling the image data via componentDidMount (RestAPI) then the component is already mount.
componentDidMount() {
// get all items via category ID and owner ID
const restApi = new API({ url: 'api' })
restApi.createEntity({ name: 'items' })
// api/items/<categoryId>/<ownerId>
restApi.endpoints.items.getTwo({ id_a: this.props.categoryId, id_b: this.props.ownerId }).then(({ data }) => this.setState({ appData: data }))
}
render() {
const { classes } = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
this.state.appData.map(element => {
this.state.images.push(element.imageUrl);
});
return (
<Card>
<CardHeader
avatar={
<Avatar aria-label="Recipe"
className={classNameHolder[Math.floor(Math.random() * classNameHolder.length)]}>
{this.props.userName.charAt(0).toLocaleUpperCase()}
</Avatar>}
title={this.props.userName} disableTypography={true} />
<CardActionArea disabled={this.state.images.length === 1 ? true : false}>
<CardMedia
id={this.props.ownerId}
className={classes.media}
image={this.state.images[this.state.imageIndex]}
onClick={this.handleOnClick} />
</CardActionArea>
</Card >
);
}
}
I can move the all API one level up so I use the props in order to pass data image but I would like to know if you guys have any some elegant solution.

Answer 1

or you can do a simple check in the component itself so to avoid resetting the state, display a mui spinner for instance while content loads
this will fix the warning and display nice feedback to the user
<>
{imgUrl ? (
<CardMedia
component="img"
alt="Contemplative Reptile"
height="140"
src={imgUrl}
title="Contemplative Reptile"
/>
) : (
<Spinner />
)}
</>

Answer 2

I had also faced same problem,
I simply added a image link in image prop of <CardMedia>.
Like,
<CardMedia
id={this.props.ownerId}
className={classes.media}
image={this.state.images[this.state.imageIndex] || 'https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png'}
onClick={this.handleOnClick} />
For me it solved, by just adding a image link.

Answer 3

You can use the Skeleton component to display a rectangle placeholder with the same height as the image while it is being fetched:
{loading ? (
<Skeleton sx={{ height: 140 }} animation="wave" variant="rectangular" />
) : (
<CardMedia component="img" height="140" image={YOUR_IMAGE_URL} />
)}

Answer 4

Not sure what appData contains, but I made some changes to your code, hopefully is gonna give you a better understanding.
render() {
const { classes } = this.props;
let classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
/*
// you don't save the return of the next array anywhere, so this map is doing nothing.
this.state.appData.map(element => {
// you cannot redefine state like this, to redefine state you have to use setState
this.state.images.push(element.imageUrl);
});
*/
const imagesUrl = this.state.appData.map(el => el.imageUrl);
return (
< Card >
<CardHeader
avatar={
<Avatar aria-label="Recipe"
className={classNameHolder[Math.floor(Math.random() * classNameHolder.length)]}>
{this.props.userName.charAt(0).toLocaleUpperCase()}
</Avatar>}
title={this.props.userName} disableTypography={true} />
{/* This part I don't undestand much what you try to do, I can propose use map of imagesUrl. But to help you more I need to know more info about what you try to do here */}
{/* Let's not render this part of the component instead of disabled it */}
{imagesUrl.length > 0 &&
<CardActionArea disabled={this.state.images.length === 1 ? true : false}>
<CardMedia
id={this.props.ownerId}
className={classes.media}
image={this.state.images[this.state.imageIndex]}
onClick={this.handleOnClick} />
</CardActionArea>
}
</Card >
);
}
}
Suggestion reviewing your array appData, maybe is good idea print the content after you retrieve it, let's see an example.
const { classes } = this.props;
const classNameHolder = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.purpleAvatar];
const AvatarComponent = (
<Avatar aria-label="Recipe"
className={classNameHolder[Math.floor(Math.random() *
classNameHolder.length)]}>
{this.props.userName.charAt(0).toLocaleUpperCase()}
</Avatar>
);
return (<div className="Cards">
{this.state.appData.map(data => (
<Card>
<CardHeader avatar={AvatarComponent} title={this.props.userName} disableTypography={true} />
<CardActionArea disabled={data.imageUrl !== ''}>
<CardMedia
id={this.props.ownerId}
className={classes.media}
image={this.state.images[this.state.imageIndex]}
onClick={this.handleOnClick} />
</CardActionArea>
</Card>
))}
</div>);
Like this, we wait to get the async data before rendering the component, previously I changed, instead of disabling the component just prevent render it if you still don't have the images.

Answer 5

I faced with the same problem and solved it by initializing that state in the constructor. The "CardMedia" has 'image' attribute which needs to receive a String, but when you want to send a state there, something like image={this.state.images[this.state.imageIndex]}, it returns null in the first rending time. You can solve the problem by adding the below code in your constructor.
this.state = {
images: 'some default address/link/values'
};

Answer 6

const photos = [
"http://i.photo.cc/300?img=1",
"http://i.photo.cc/300?img=2",
"http://i.photo.cc/300?img=3",
"http://i.photo.cc/300?img=4"
];
{photos.map(photo => (
<CardMedia image={photo} />
))}
Providing image prop with the direct URL also works!

Answer 7

just add component="image" and your are good to go
<CardMedia component="image"/>

Answer 8

To get the image in the CardMedia component follow the below way:-
Import the image from any folder to the desired componnent & it will be done !
import picture from "../assets/picture.jpg"
<CardMedia
component="img"
height="20%"
image={image}
alt="scene"
/>