CODEWITHSUNDEEP
reactjsmaterial-ui
Tom Beardmore
Tom Beardmore

Reputation: 11

How do I add a logo to MUI React navbar

I'd like to add a logo to the left side of my navbar but can't seem to make it work properly.

const Navbar = ({ ...props }) => {
    return (
        <React.Fragment>
            <CssBaseline />
            <ElevationScroll {...props}>
                <AppBar>
                    <Grid container sx={{p:2, flexDirection:'row', justifyContent:'space-between', flexWrap:'nowrap', backgroundColor:'#1c1c1c'}}>
                        <Grid>
                            <img src={'./images/Logo.png'} alt={'shadow-reels-logo'} height={'10px'}></img>   
                        </Grid>
                        <Grid item sx={{}}>
                            <Grid container sx={{}}>
                                <Grid item>
                                    <Button sx={{color:'#ededed', borderRadius:'40px'}}>Services</Button>
                                </Grid>
                                <Grid item sx={{mx:5}}>
                                    <Button sx={{color:'#ededed', borderRadius:'40px'}}>Work</Button>
                                </Grid>
                                <Grid item>
                                    <Button sx={{color:'#ededed', borderRadius:'40px'}}>About</Button>
                                </Grid>
                            </Grid>
                        </Grid>
                        <Button sx={{color:'black', backgroundColor:'#ededed', borderRadius:'40px'}}>Contact</Button>
                    </Grid>
                </AppBar>
            </ElevationScroll>
            <Toolbar />
        </React.Fragment>
    );

}

I have the logo in an images folder within the react apps src folder.

Upvotes: 1

Views: 2471

Answers (1)

MaCadiz
MaCadiz

Reputation: 1817

This will depend on how are you serving this image. By default a react app will allow you to import an image into the application like this:

import MyLogo from '/path/to/my/logo.png';

And this MyLogo imported is a data-uri for that logo. So finally you can do something like this:

import MyLogo from '/path/to/my/logo.png';

const MyComponent = () => {
    return <img src={MyLogo} />
}

Note that this method will include every image you are importing into the final transpiled code of your application, making it bigger. Depending the use case, sometimes it's better to store this images in an static storage and use them with he provided urls.

Upvotes: 2

Related Questions