如何使用图像替换 Navbar.brand？答案

【问题标题】：How to use image to replace Navbar.brand?如何使用图像替换 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" 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

【问题讨论】：

标签： html reactjs react-bootstrap

【解决方案1】：

要将徽标（图像）添加到 `Navbar.Brand`，您需要保留它并在其中放入 `<img/>`

类似这样的东西”

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

【讨论】：

要将徽标（图像）添加到 Navbar.Brand，您需要保留它并在其中放入 &lt;img/&gt;

要将徽标（图像）添加到 `Navbar.Brand`，您需要保留它并在其中放入 `<img/>`