reactjs - How to put a logo in React Material UI Toolbar

Question

I want to put a logo on the left side of the Toolbar in React (Material-UI Apppbar), but I don't get why it doesn't work. The logo is not showing at all.

import logo from '../../assets/companylogo.png';


const useStyles = makeStyles((theme) => ({
    ...

    logo: {
      width: '10%',
    },

    ...
}));

<AppBar position='sticky'>
    <Toolbar className={classes.toolbar} variant='dense'>
        <img scr={logo} className={classes.logo}/>
        <div className={classes.search}>
            ...
        </div>
        <div className={classes.grow} />
        <div className={classes.sectionDesktop}>
            ...
        </div>
        <div className={classes.sectionMobile}>
            ...
        </div>
    </Toolbar>
</AppBar>

When <img/> is included I can see the width changes on the left depending on what the width of the logo is set to.

Here it is without the <img/>

I tried different images both .png and other formats, but id doesn't solve anything. I made sure the path to images is correct and also tried to wrap the <img/> with <div></div>, but nothing solved it. I thought it might be a z-index issue and the image is simply hiding behind the Toolbar, but that doesn't make sense to me and after playing a bit with zIndex value for image it didn't solve it either. I'm out of ideas here.

Any idea what am I doing wrong here?

Answer 1

等待大神答复