3

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

Dave
  • 15,639
  • 133
  • 442
  • 830

3 Answers3

2

The avatar prop accepts a node, so you can use avatar api like this one

avatar={<Avatar alt="An apple" src="img/apple.svg" />}

So your code will become

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

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}>
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
0

Are you sure avatar takes an image? From what I can see in the demo. In the component.

avatar={
          <Avatar aria-label="recipe" className={classes.avatar}>
            R
          </Avatar>
        }

In the styles:

avatar: {
    backgroundColor: red[500],
  },

Can't find an image attribute for avatar props.

tksilicon
  • 3,276
  • 3
  • 24
  • 36
  • Thanks @tksilicon, but what if I have my own image in my project and I want to pass that to the "avatar" argument? – Dave Apr 26 '20 at 01:30