时间戳

首页 > 解决方案 > 如何使用 ReactBootstrap 在导航栏中显示徽标？

css - 如何使用 ReactBootstrap 在导航栏中显示徽标？

问题描述

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

我确实使用过：

"src=/michelinlogo.png"

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

以及相对路径：src/Components/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>

我希望徽标显示在我的导航栏中，而不是我看到替代文本。

标签： cssreactjsreact-bootstrap

解决方案

尝试先导入徽标：

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>

推荐阅读