使用Material UI时浏览器中头像图片无法显示的问题排查

你在传递自定义头像图片时犯了一个关键错误：MUI的AccountCircleIcon是矢量图标组件，不支持src属性，所以你传入的图片无法被渲染出来。下面是具体的修正方案：

原始代码 #

Component-1 #

import HomeIcon from '@mui/icons-material/Home';
import HeaderOption from './HeaderOption';
import avatar from '../src/images/avatar.jpg';

function Header() {
  return (
    <div className='right_header'>
      <HeaderOption Icon={HomeIcon} title='Home' />
      <HeaderOption avatarIcon={avatar} title='Me' />
    </div>
  );
}

export default Header;

Component-2 #

import React from 'react';
import './HeaderOption.css';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';

function HeaderOption({ avatarIcon, Icon, title }) {
  return (
    <div className='headerOption'>
      {Icon && <Icon className='headerOption_icon' />}
      {avatarIcon && (
        <AccountCircleIcon className='headerOption_icon' src={avatarIcon} />
      )}
      <h3 className='headerOption_title'>{title}</h3>
    </div>
  );
}

export default HeaderOption;

修正方案 #

方案一：使用<img>标签直接显示头像 #

把Component-2中渲染头像的部分换成普通img标签，就能正确加载自定义图片：

import React from 'react';
import './HeaderOption.css';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';

function HeaderOption({ avatarIcon, Icon, title }) {
  return (
    <div className='headerOption'>
      {Icon && <Icon className='headerOption_icon' />}
      {avatarIcon && (
        <img 
          className='headerOption_icon' 
          src={avatarIcon} 
          alt="用户头像" 
        />
      )}
      <h3 className='headerOption_title'>{title}</h3>
    </div>
  );
}

export default HeaderOption;

方案二：使用MUI的Avatar组件（推荐） #

如果想保持MUI的组件风格，用Avatar组件显示图片，样式和交互会更统一：

import React from 'react';
import './HeaderOption.css';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import Avatar from '@mui/material/Avatar'; // 导入Avatar组件

function HeaderOption({ avatarIcon, Icon, title }) {
  return (
    <div className='headerOption'>
      {Icon && <Icon className='headerOption_icon' />}
      {avatarIcon && (
        <Avatar 
          className='headerOption_icon' 
          src={avatarIcon} 
          alt="用户头像"
        />
      )}
      {/* 没有自定义头像时，显示默认图标 */}
      {!avatarIcon && !Icon && <AccountCircleIcon className='headerOption_icon' />}
      <h3 className='headerOption_title'>{title}</h3>
    </div>
  );
}

export default HeaderOption;

注意：用方案二的话，要确保已安装@mui/material包，未安装可执行命令：npm install @mui/material @emotion/react @emotion/styled

内容的提问来源于stack exchange，提问作者mani