来自我的 API 的 Material UI CardMedia Image 数据

Question

Has anyone of you experienced this error when using the CardMedia API of Material-UI?

Currently i'm using the Card & CardMedia from material-ui to render information coming from my api, but I'm having issue displaying the Image since I'm pulling the image on ComponentDidMount seems like the image should already be available before then.

This is the error

Warning: Failed prop type: Material-UI: Either `children`, `image`, `src` or `component` prop must be specified.

This is the code for the mother component

async componentDidMount() {
    try {
      const getScreams = await axios.get("/screams");
      this.setState({ screams: getScreams.data });
    } catch (error) {
        console.log(error)
    }
  }
  render() {
     let recentScreamsMarkup =  this.state.screams ? (
        this.state.screams.map(item => <Scream key={item.screamId} scream={item}/>)
     ) : <p>Loading ...</p>
    return (
      <Grid container spacing={8}>
        <Grid item sm={8} xs={12}>
          {recentScreamsMarkup}
        </Grid>
        <Grid item sm={4} xs={12}>
          <p>Profile ...</p>
        </Grid>
      </Grid>
    );
  }
}

and for each of those I have this custom component

export class Scream extends Component {

    render() {
        const { classes, scream : {body, commentCount, createdAt, likecount, userHandle, userImage, screamId } } = this.props;
        return (
            <Card className={classes.card}>
                <CardMedia className = {classes.image}
                    image={userImage}
                    title={"Profile Image"}
                />
                <CardContent className={classes.content}>
                    <Typography variant="h5" component={Link} to={`/users/${userHandle}`} color= "primary">
                        {userHandle}
                    </Typography>
                    <Typography variant="body2"
                    color='textSecondary'>
                    {createdAt}
                    </Typography>
                    <Typography variant="body1">
                        {body}
                    </Typography>
                </CardContent>

            </Card>
            
        )
    }
}

I know that the code is working as expected since I tried to put a static img url and it is pulling that data with no problem.

all data is showing in the card except for the image.

this is the default state from the Home component:

constructor(props) {
    super(props);
    // Don't call this.setState() here!
    this.state = {
      screams: null,
    };
  }

Answer 1

According to card media api it is written this:

Image to be displayed as a background image. Either image or src prop must be specified. Note that caller must specify height otherwise the image will not be visible .

So in your card image css try this:

image: {
    height: 140,
  }

That will resolve your issue if your image path is correct(can change height according to your own requirement).

Answer 2

Sorry for all the trouble, my silly ask did not even tried to console log the returned data from my API, that being said I've tried doing just that and found out that I am not including the userImage in the returned data.

I updated by back-end code and this is now working as intended.

Thank you all for the suggestions!