Search code examples
reactjsmaterial-uiavatar

How do you set the material-ui cardholder avatar?

I'm trying to use the material-ui CardHolder component -- https://material-ui.com/api/card-header/ . I have this image in my project

src/img/apple.svg

so I tried to set the avatar image like so

<Card className={classes.root} {...rest}>
  <CardHeader
    avatar="img/apple.svg"
    title={title}
    titleTypographyProps={{ variant: "h2", component: "span" }}
    className={classes.cardHeader}
  />
  <CardContent className={classes.cardContent}>

but instead what is printed out is just the path of my image. What's the proper way to output the avatar as a real image?

enter image description here

Solution

  • You can make use of Avatar component from Material-ui and pass it on as a avatar prop.

    the problem in your code is that you are trying to pass on a src to it whereas it takes in a Node

    <Card className={classes.root} {...rest}>
  <CardHeader
    avatar={<Avatar alt="Apple" src="img/apple.svg" />}
    title={title}
    titleTypographyProps={{ variant: "h2", component: "span" }}
    className={classes.cardHeader}
  />
  <CardContent className={classes.cardContent}>