Размещение логотипа в навигационной панели

Question

Я получаю испорченное изображение, когда помещаю свой логотип в панель навигации. Я храню его локально в общей папке.

Я пытался пройти как опору и напрямую связать путь, но я не могу заставить его работать.

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;

Мне нужно, чтобы логотип отображался в левом углу панели навигации

Answer 1

Вы проверили, что относительный путь правильный?Возможно, чего-то не хватает в "../../public/LQ_Logo.png".

. Вы можете попробовать использовать эту альтернативу:

import { ReactComponent as Logo } from './logo.svg';
const App = () => (
  <div>
    {/* Logo is an actual React component */}
    <Logo />
  </div>
);

Измените изображение png на svg (is isлучше увеличить ширину / высоту для сети), а затем импортировать изображение как компонент и вызвать компонент в вашем коде.

Answer 2

Для img в папке Public используйте относительный путь к Public.

Для public/Vector.png используйте ./Vector.png.

Более того, если это SVG, вы можете импортировать его как ReactComponent, например:

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>
  );
};

Демо-версия: