Search code examples
reactjsmaterial-uiavatar

Material UI : How to use my own image in avatar

I want to use an image in the avatar. But I am not able to get the desired result.

This is my project structure.

projectname -> packages -> portal -> public -> favicon-16x16.png

      <Avatar
        src="/public/favicon-16x16.png"
        className={classes.avatar}
      />

         <Avatar
           src="packages/portal/public/favicon-16x16.png"   
           className={classes.avatar}  
         />

I have tried the above two ways. But not load to get the image. Any help is appreciated. Thanks.

Solution

  • This the correct way : 

    <Avatar src={`${process.env.PUBLIC_URL}/apple-touch-icon.png`} className={classes.avatar} style={{ borderRadius: 0 }} />

    Thank you @RobB