How to use image to replace Navbar.brand?

Question

Hi guys so I'm trying to create header for my react app using react-bootstrap navbar. There's a Navbar.brand tag from the template. I tried replacing those tags with image because I want to include my logo and when user click the logo, it will redirect the user to the main page. But it didn't work for me, can someone please help me ?

Here's my code:

import {Navbar, Nav} from 'react-bootstrap'
import {Link} from 'react-router-dom'
import '../CSS/Header.css'

const Header = () => {
    return (
        <Navbar className="MainHeader" expand="lg" variant="dark">
            <>
                <img src="/Images/Fblogo.png" alt="Facebook" as={Link} to={"/"}/>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse className="Headerlist justify-content-end">
                    <Nav>
                        <Nav.Link as={Link} to={"/Facilities"}>Facilities</Nav.Link>
                        <Nav.Link as={Link} to={"/Room"}>Room</Nav.Link>
                        <Nav.Link as={Link} to={"/Events"}>Events</Nav.Link>
                        <Nav.Link as={Link} to={"/Contactus"}>Contact Us</Nav.Link>
                        <Nav.Link as={Link} to={"/Booknow"}>Book Now</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </>
        </Navbar>
    )
}

export default Header

Answer 1

To add a logo (image) to the Navbar.Brand you would need to keep it and put an <img/> inside

Something like this"

<Navbar.Brand href="/">
    <img src="/Images/Fblogo.png" alt="Facebook"/>
</Navbar.Brand>