Material-UI的Avatar怎么显示默认图标而不是图片？

鉴恒 ☘︎ 提问于 2026-03-18 20:51:16 阅读 4

组件

我在用 Material-UI 的 Avatar 组件，想在用户没上传头像时显示一个默认的 Person 图标，但不管怎么写都只显示首字母或者空白。我试过直接传进去，但好像不对？

这是我的代码：

import { Avatar } from '@mui/material';
import PersonIcon from '@mui/icons-material/Person';

function UserAvatar() {
  return <Avatar><PersonIcon /></Avatar>;
}

我来解答赞 2 收藏

反馈

1 条解答

司空子格 Lv1

你的代码思路是对的，MUI Avatar 确实可以直接放图标作为 children，但问题在于 Avatar 默认的背景色是灰色的，而且会应用一些文字相关的样式，导致图标显示不出来。

最简单的解决办法就是给 Avatar 加个背景色：

import { Avatar } from '@mui/material';

import PersonIcon from '@mui/icons-material/Person';



function UserAvatar() {

  return (

    

      

    

  );

}

或者如果你想用灰色背景也可以用 grey.500 之类的。

还有一点要说的是，如果你是想在图片加载失败时显示默认图标，那得用 onError 处理：

function UserAvatar({ src }) {

  const [imgError, setImgError] = useState(false);



  return (

    
      src={imgError ? undefined : src}

      onError={() => { setImgError(true); return true; }}

      sx={{ bgcolor: 'primary.main' }}

    >

      

    

  );

}

这样当图片加载失败的时候就会自动显示 PersonIcon 了。我之前也碰到过类似的情况，默认样式没调好怎么看怎么奇怪，加上 bgcolor 就正常了。

2026-03-18 21:03