如何使用图像替换 Navbar.brand?
Posted
技术标签:
【中文标题】如何使用图像替换 Navbar.brand?【英文标题】:How to use image to replace Navbar.brand? 【发布时间】:2021-11-03 04:55:13 【问题描述】:大家好,我正在尝试使用 react-bootstrap 导航栏为我的 react 应用程序创建标题。模板中有一个 Navbar.brand 标签。我尝试用图像替换这些标签,因为我想包含我的徽标,并且当用户单击徽标时,它会将用户重定向到主页。但它对我不起作用,有人可以帮助我吗?
这是我的代码:
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" 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
【问题讨论】:
【参考方案1】:要将徽标(图像)添加到 Navbar.Brand
,您需要保留它并在其中放入 <img/>
类似这样的东西”
<Navbar.Brand href="/">
<img src="/Images/Fblogo.png" />
</Navbar.Brand>
【讨论】:
以上是关于如何使用图像替换 Navbar.brand?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?