can'；无法在导航栏html中显示徽标

我正在制作一个简单的应用程序，但我无法在导航栏中显示徽标。它与我的组件位于同一文件夹中，其名称为“logo.jpg”。有人能帮忙吗。我已经摆弄它一段时间了，现在无法得到的标志显示。谢谢

以下是我的组件的代码：

import React, {Component} from 'react';
import {Navbar, Nav,NavDropdown, Form, FormControl, Button} from 'react-bootstrap';

import './Topbar.css'

class Topbar extends Component {
  render() {
    return (
      <div>
      <div class="topnav">
        <a class="active" href="#home">Home</a>

        <a class="navbar-brand" href="/">
      <div class="logo-image">
            <img src="logo" alt ="a" class="img-fluid"/>
      </div>
      </a>

        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
      </div>
    )
  }
}

export default Topbar;

//and my css

.topnav {
  background-color: #FFFF00;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #808080;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.logo-image{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -6px;
}

import React，{Component}来自'React'；
从“react bootstrap”导入{Navbar、Nav、NavDropdown、Form、FormControl、Button}；
导入“./Topbar.css”
类Topbar扩展组件{
render（）{
返回(
)
}
}
导出默认顶栏；
//还有我的css
托普纳夫先生{
背景色：#FFFF00；
溢出：隐藏；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
颜色：#808080；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*向活动/当前链接添加颜色*/
.topnav a.active{
背景色：#4CAF50；
颜色：白色；
}
.标志图像{
宽度：46px；
高度：46px；
边界半径：50%；
溢出：隐藏；
利润上限：-6px；
}

---

谢谢！真的很感激

将徽标路径插入src属性，如

---

请注意，徽标路径与基础文件的位置相对。

出于开发目的，只需使用相对路径从当前位置导入图像，然后使用变量

img

中提供的url，并使用它设置图像标记的

src

import React, {Component} from 'react';
import {Navbar, Nav,NavDropdown, Form, FormControl, Button} from 'react-bootstrap';

import img from './logo.png'
import './Topbar.css'

class Topbar extends Component {
  render() {
    return (
      <div>
      <div class="topnav">
        <a class="active" href="#home">Home</a>

        <a class="navbar-brand" href="/">
      <div class="logo-image">
            <img src={img} alt ="a" class="img-fluid"/>
      </div>
      </a>

        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
      </div>
      </div>
    )
  }
}

import React，{Component}来自'React'；
从“react bootstrap”导入{Navbar、Nav、NavDropdown、Form、FormControl、Button}；
从“./logo.png”导入img
导入“./Topbar.css”
类Topbar扩展组件{
render（）{
返回(
)
}
}

我将它保存在完全相同的文件夹中，我的整行代码是：“。我不明白为什么这不起作用。你说它是.jpg，那么你为什么称它为logo.png？我实际上将它改为png。确切的文件是”logo.png““。它在同一个目录中，不起作用，我还试图在其他地方显示另一个图像，我遇到了完全相同的问题。你的开发工具的“源”是怎么说的？