reactjs - Material-UI 无图像时显示字母头像

Question

我正在使用 Material-UI Avatar React 组件来显示个人资料图像。当给定的 url 中没有图像时，我需要显示字母头像。我怎样才能实现这个目标？

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

Answer 1

Avatar 组件本身有一个替代属性，如标准 img 标签

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