How to add circular profile picture to react bootstrap nav bar-CodePudding

I'm trying to add a circular profile picture to my react-bootstrap nav bar.

Similar to this:

But I'm not sure where to add the div for the circular image.

Here is my navbar code:

import { Link } from "react-router-dom";
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Navbar, Nav, Container } from 'react-bootstrap';

const NavBar = (props) => {
    const user = 'Petrina.C'
    return ( 
        <>
        <Navbar expand="lg">
        <Container style={{maxWidth:'100%'}}>
          <Navbar.Brand href="#home">Voter Outreach</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="me-auto" id="navLinks">
              <Nav.Link href="/">Home</Nav.Link>
              <Nav.Link href="/voters">Voters</Nav.Link>
              <NavDropdown title={`${user}`} id="basic-nav-dropdown">
                <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                <NavDropdown.Item href="#action/3.2">
                  Another action
                </NavDropdown.Item>
                <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item href="#action/3.4">
                  Separated link
                </NavDropdown.Item>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
        {props.children}
    </>
     );
}
 
export default NavBar;

Any help is appreciated!

CodePudding user response：

You can put image and use class rounded-circle to make it like this:

<img src="..."  alt="...">

CodePudding user response：

There are several properties available in React-Bootstrap docs. You can simply pass the props as true if you want a property to be applied.

Example:

import Image from 'react-bootstrap/Image'
<Image src="..." roundedCircle={true}>

Or you can always use the CSS properties

import Image from 'react-bootstrap/Image'
<Image src="..." style={{ borderRadius: "50%", height: "100px", width: "100px" }} />