1

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.

Arslan Tariq
  • 2,478
  • 2
  • 22
  • 45
Tanu
  • 1,286
  • 4
  • 16
  • 35
  • 2
    I'm pretty sure you need to have brackets around props, even when they're strings. You also aren't showing the code of how you're trying to use it. Also, we can't see if you're using local images correctly. Check this answer about importing local images https://stackoverflow.com/a/44158919/10140836 . You need to provide more info in your post. – Rob B Sep 05 '19 at 14:59
  • This the correct way : `````` Thank you @RobB – Tanu Sep 05 '19 at 15:46
  • 2
    @RobB you absolutely do *not* need to use brackets with strings in JSX. Simply using quotation marks is sufficient. – ndugger Sep 05 '19 at 16:07

1 Answers1

3

This the correct way : 

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

Thank you @RobB

Tanu
  • 1,286
  • 4
  • 16
  • 35