material-ui持卡人头像怎么设置？

Question

我正在尝试使用 material-ui CardHolder 组件 -- https://material-ui.com/api/card-header/。我的项目中有这张图片

src/img/apple.svg

所以我试着这样设置头像

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

但是打印出来的只是我图片的路径。将头像输出为真实图像的正确方法是什么？

Answer 1

你确定头像拍照了吗？从我在 demo 中可以看到的。在组件中。

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

样式中：

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

找不到头像道具的图像属性。

Answer 2

avatar 属性接受一个节点，所以你可以像这样使用 avatar api

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

所以你的代码会变成

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

Answer 3

您可以使用 Material-ui 中的 Avatar 组件并将其作为头像道具传递。

您的代码中的问题是您试图将 src 传递给它，而它接受 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}>

material-ui持卡人头像怎么设置？

How do you set the material-ui cardholder avatar?

avatar

reactjs

material-ui