Material-UI показывает букву аватара, когда нет изображения - PullRequest
Новая
       19

Material-UI показывает букву аватара, когда нет изображения

0 голосов
/ 08 мая 2019

Я использую компонент React Avatar Material-UI для отображения изображений профиля. Мне нужно показывать аватар письма, когда по данному URL-адресу нет изображения.Как мне этого добиться?

1002 *

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

Вы можете использовать атрибут alt напрямую, Ref 

<Avatar alt="No Image" src={ProfileImageUrl} className={classes.avatar}>
       {userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
</Avatar>

Или вы можете использовать условие для отображения значения по умолчанию letter, Ref ,учитывая, что у вас userDetails object

<Avatar Image" src={ProfileImageUrl} className={classes.avatar}>
     {Object.getOwnPropertyNames(userDetails).length>0 ? userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0) : 'No Image'}
</Avatar>
0 голосов
/ 08 мая 2019

Сам компонент аватара имеет альтернативный атрибут, такой как стандартный img тег 

   <Avatar alt="avatar" src={ProfileImageUrl} className={classes.avatar}>
       {userDetails.fistname.charAt(0)+" "+userDetails.lastname.charAt(0)}
    </Avatar>
...