引导导航栏图标不显示

Question

我是 React 和 Bootstrap 的新手。我正在使用 Bootstrap 5.1。

我正在尝试创建一个带有我的徽标的导航栏。无论我尝试什么，我都无法显示图像。这是我的 Navbar.js

import React from 'react';

function Navbar() { 
    return (
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">
                <img alt="House" src="/img/logo.svg" width="30" height="30"/>
              </a>
            </div>
          </div>
        </nav>
    )
 }

 export default Navbar

标志的路径在这里，“/react-app/src/img/logo.svg”，我尝试了多种不同的路径但没有成功。

这就是我所看到的。

我错过了什么？

Answer 1

你需要像这样使用import来加载路径：

import houseImgPath from './img/logo2.png' // replace with your own path

然后在你的img中使用它src

 <img alt="House" src={houseImgPath} width="30" height="30"/>

Answer 2

你需要导入图片例如：

import imageName from './img/logo2.png';
        
<img alt="House" src={imageName} width="30" height="30"/>

Answer 3

您应该将图像保存在 src 中的某个位置（与其他建议相反）并将其像模块一样导入。如果您想预加载图像或将图像用作应用程序的图标，您可能会使用公用文件夹的唯一时间。

import React from 'react';
import img from './img/image.jpg'        // or '../path/relative/to/component/image.jpg'

function Navbar() { 
    return (
        <nav class="navbar navbar-default">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand" href="#">
                <img alt="House" src={img} width="30" height="30"/>
              </a>
            </div>
          </div>
        </nav>
    )
}

export default Navbar

Answer 4

您需要将图像放在公共文件夹中才能获取此路径img/logo2.png 请尝试并告诉我