将Logo放入Navbar时显示破碎图求助，需置于导航栏左侧

Hey there! Let's get that logo showing up properly in your NavBar—broken images are always a pain, but this is an easy fix once you know how React handles static assets from the public folder.

The Core Issue: Incorrect Image Path #

In React, the public folder acts as your static asset root directory. When you reference files from here, you don't need to use relative paths like ../../public/—instead, you can use an absolute path starting with / to point directly to the file in public. Your current relative path is looking for the image outside your app's build output, which is why it's broken.

Updated Code with Fixed Path #

Here's your NavBar component with the corrected image path:

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='/LQ_Logo.png' width={182} height={64} alt="LQ Logo" />
 </Typography>
 </Toolbar>
 </AppBar>
 </div>
 )
};

export default NavBar;

Optional: Clean Up Your Component Structure #

Quick note: Typography is designed for text content, so wrapping an image inside it isn't the most semantic approach. You can simplify things by placing the image directly in the Toolbar (which uses flexbox by default, so your logo will stay aligned to the left automatically):

import AppBar from '@material-ui/core/AppBar'
import Toolbar from '@material-ui/core/Toolbar'

const NavBar = () => {
 return(
 <div>
 <AppBar className='nav-bar' position="static" color='white'>
 <Toolbar>
 <img src='/LQ_Logo.png' width={182} height={64} alt="LQ Logo" />
 </Toolbar>
 </AppBar>
 </div>
 )
};

export default NavBar;

Double-Check File Placement #

Make sure your LQ_Logo.png is directly in the root of the public folder (not nested inside a subfolder like public/images/). If it is in a subfolder, adjust the path accordingly—for example, /images/LQ_Logo.png.

That should get your logo displaying correctly on the left side of the NavBar!

内容的提问来源于stack exchange，提问作者rstowe1