Question

我正在制作一个简单的应用程序，但无法在我的导航栏中显示徽标。它与我的组件位于同一文件夹中，其名称为“ 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;
}

谢谢！真的很感激！

Answer 1

将徽标的路径插入src属性中，例如<img src="/logo.jpg" alt ="a" class="img-fluid"/>

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

Answer 2

出于开发目的，只需使用相对路径从当前位置导入图像，然后使用变量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>
    )
  }
}

无法使徽标显示在导航栏html

2 个答案: