Image is not displayed for avatar in browser - using Material UI - reactjs

Question

I am newbie and trying to get hands-on working on a project. I have referred to the other questions but they are not similar to this. I am unsure what I am missing here.
I have imported the image in Component-1 and sending it as props to Component-2
here is my code
**Component-1**
import HomeIcon from '#mui/icons-material/Home';
import HeaderOption from './HeaderOption';
import avatar from '../src/images/avatar.jpg';`enter code here`
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;

Answer 1

I assume what you need is this:
import * as React from 'react';
import Avatar from '#mui/material/Avatar';
import Stack from '#mui/material/Stack';
export default function ImageAvatars() {
return (
<Stack direction="row" spacing={2}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</Stack>
);
}
AccountCircleIcon is an icon and you can't change that. Therefore what you should do is this:
avatarIcon && <Avatar alt="Cindy Baker" className='headerOption_icon' src={avatarIcon} /> )}