Placing logo image into navbar - reactjs

Question

I am getting a broken image when I put my logo inside of the navbar. I have it saved locally inside the public folder.
I have tried passing as a prop, and directly linking to the path, but i cannot seem to get it to work.
import AppBar from '#material-ui/core/AppBar'
import Toolbar from '#material-ui/core/Toolbar'
import Typography from '#material-ui/core/Typography'
const NavBar = () => {
return(
<div>
<AppBar className='nav-bar' position="static" color='white'>
<Toolbar>
<Typography variant="title" >
<img src='../../public/LQ_Logo.png' width={182} height={64} />
</Typography>
</Toolbar>
</AppBar>
</div>
)
};
export default NavBar;
I need the logo to be displayed in the left corner of the navbar

Answer 1

For img within Public folder use relative path to Public.
For public/Vector.png use ./Vector.png.
Moreover, if it's a SVG you can import it as ReactComponent, for example:
import { ReactComponent as CatImg } from "./add-debug.svg";
const NavBar = () => {
return (
<div>
<AppBar className="nav-bar" position="static" color="white">
<Toolbar>
<Typography variant="title">
<CatImg height={100} />
</Typography>
</Toolbar>
<Toolbar>
<Typography variant="title">
<img src="./Vector.png" alt="bug" height={100} />
</Typography>
</Toolbar>
</AppBar>
</div>
);
};
Demo:

Answer 2

Did you check that relative path is correct? Maybe something is missing in "../../public/LQ_Logo.png".
You can try to use this alternative:
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo is an actual React component */}
<Logo />
</div>
);
Change the png image to svg (is better to escalate width/heigh for web), and then import the image as a component and call the component in your code.