如何使用图像代替导航条品牌?

Question

嗨，伙计们，所以我正在尝试使用react-bootstrap导航栏为我的react应用程序创建标题。有一个导航条。模板中的品牌标签。我尝试用图像替换这些标签，因为我想包括我的徽标，当用户单击徽标时，它会将用户重定向到主页面。但是它不适合我，有人可以帮我吗?

下面是我的代码:

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

要将徽标(图像)添加到Navbar.Brand，您需要保留它并将<img/>放入

像这样">

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