Как вы устанавливаете материал-интерфейс пользователя аватара? - PullRequest
Новая
       97

Как вы устанавливаете материал-интерфейс пользователя аватара?

2 голосов
/ 25 апреля 2020

Я пытаюсь использовать компонент 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}>

, но вместо этого то, что распечатано, это просто путь моего изображения. Как правильно вывести аватар в виде реального изображения?

enter image description here

Ответы [ 3 ]

2 голосов
/ 03 мая 2020

Вы можете использовать компонент Avatar из Material-ui и передавать его в качестве аватара.

проблема в вашем коде в том, что вы пытаетесь передать дальше sr c к нему, тогда как он принимает 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}>
1 голос
/ 03 мая 2020

Опора 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}>
0 голосов
/ 25 апреля 2020

Вы уверены, что аватар снимает? Из того, что я вижу в демоверсии . В компоненте. 

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

В стилях: 

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

Не удается найти атрибут изображения для реквизита аватара.

...