css - 我如何使用 React Bootstrap 在导航栏中显示 Logo ？

Question

我尝试为我的第一个网站制作一个带 Logo 的导航栏。我面临的问题是 Logo 根本不想显示。它以某种方式工作的唯一方法是使用 url 链接到来自互联网的一些标志。我在同一个文件夹中有一个 Logo 和 .js 文件。

我确实用过:

"src=/michelinlogo.png"

绝对路径: /home/goteii/reactprojects/xxx/xxxx/src/Components/michelinlogo.png

以及相对路径: src/组件/michelinlogo.png

export class NavBar extends Component {
render() {
    return (
        <>
<Navbar bg="dark" style = {{height: "5em"}}>
<Navbar.Brand href="#home">
  <img
    alt="Michelin_logo"
    src="/michelinlogo.png"
    width="150"
    height="30"
    className="d-inline-block align-top"
  />
  {' Michelin App'}
</Navbar.Brand>
<Nav>
<Navbar.Brand href="#login" style= {{float:"right"}}>Login
</Navbar.Brand>
</Nav>
</Navbar>

我希望 Logo 显示在我的导航栏中，但我看到了替代文本。

Answer 1

首先尝试导入 Logo :

import logo from './michelinlogo.png'; // If it's in the same folder as your component. Otherwise adjust the path

<Navbar.Brand href="#home">
  <img
    alt="Michelin_logo"
    src={logo}
    width="150"
    height="30"
    className="d-inline-block align-top"
  />
  {" Michelin App"}
</Navbar.Brand>