javascript - React-bootstrap Navbar Brand logo not rendering - Stack Overflow

admin管理员组

文章数量:1344571

I am trying to create a logo to use with the navbar on my react app using react bootstrap, and I have used the documentation as a guide. However, when viewing the page using localhost://3000, the following is shown:

What am I doing wrong? I have even tried copying the example code snippet from the documentation site into my project, and the same thing renders. However, I am open up the svg file with no issues within Chrome itself. Here is my code for App.js:

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Container from 'react-bootstrap/Container'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

class App extends React.Component {
  constructor(props) {
    super();
    this.state = {
      title: "Danny's Website",
      headerLinks: [
        { title: 'Home', path: '/' },
        { title: 'Projects', path: '/projects' },
        { title: 'Documents', path: '/documents' },
        { title: 'Contact Me', path: '/contact' }
      ],
      home: {
        title: 'Hey there!',
        subtitle: 'Wele to my personal website.',
        text: 'Placeholder text for now',
      },
      projects: {
        title: 'My Projects',
        subtitle: "From app development to tinkering with robots, I've tried it all",
      },
      documents: {
        title: 'So you wanna see my deets, huh?',
      },
      contact: {
        title: "Let's get in touch",
      }

    }
  }

  render() {
    return (
      <Router>
        <Container fluid={true} className='p-0'>  { /*Fluid false = Huge left margin. Change padding via "className='p-0'" */}
          <Navbar expand="lg" bg="light" variant="light" className="border-bottom">
            <Navbar.Brand href="#home" >
              <img 
                alt=""
                src="/bootstrap-solid.png" 
                width="30px" 
                height="30px" 
                className="d-inline-block align-top"/>{' '}
            Home Site
          </Navbar.Brand>
            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle">
              <Nav className="ml-auto">
                <Link className="nav-link" to="/">Home</Link>
                <Link className="nav-link" to="/projects">Projects</Link>
                <Link className="nav-link" to="/documents">Documents</Link>
                <Link className="nav-link" to="/contact">Contact Me</Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
        </Container>
      </Router>

    );
  }

}

export default App;

I am trying to create a logo to use with the navbar on my react app using react bootstrap, and I have used the documentation as a guide. However, when viewing the page using localhost://3000, the following is shown:

What am I doing wrong? I have even tried copying the example code snippet from the documentation site into my project, and the same thing renders. However, I am open up the svg file with no issues within Chrome itself. Here is my code for App.js:

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Container from 'react-bootstrap/Container'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

class App extends React.Component {
  constructor(props) {
    super();
    this.state = {
      title: "Danny's Website",
      headerLinks: [
        { title: 'Home', path: '/' },
        { title: 'Projects', path: '/projects' },
        { title: 'Documents', path: '/documents' },
        { title: 'Contact Me', path: '/contact' }
      ],
      home: {
        title: 'Hey there!',
        subtitle: 'Wele to my personal website.',
        text: 'Placeholder text for now',
      },
      projects: {
        title: 'My Projects',
        subtitle: "From app development to tinkering with robots, I've tried it all",
      },
      documents: {
        title: 'So you wanna see my deets, huh?',
      },
      contact: {
        title: "Let's get in touch",
      }

    }
  }

  render() {
    return (
      <Router>
        <Container fluid={true} className='p-0'>  { /*Fluid false = Huge left margin. Change padding via "className='p-0'" */}
          <Navbar expand="lg" bg="light" variant="light" className="border-bottom">
            <Navbar.Brand href="#home" >
              <img 
                alt=""
                src="/bootstrap-solid.png" 
                width="30px" 
                height="30px" 
                className="d-inline-block align-top"/>{' '}
            Home Site
          </Navbar.Brand>
            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle">
              <Nav className="ml-auto">
                <Link className="nav-link" to="/">Home</Link>
                <Link className="nav-link" to="/projects">Projects</Link>
                <Link className="nav-link" to="/documents">Documents</Link>
                <Link className="nav-link" to="/contact">Contact Me</Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
        </Container>
      </Router>

    );
  }

}

export default App;

• javascript
• reactjs
• react-bootstrap
• graphical-logo

Share Follow asked Sep 20, 2020 at 14:19 anyotherdudeanyotherdude 8311 silver badge1010 bronze badges 1

• your way of adding source is wrong src="/bootstrap-solid.png" you should try to put this (bootstrap-solid.png) image inside the public folder – RK_oo7 Commented Sep 20, 2020 at 14:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

import Logo from '../../images/tellogo.jpg';  //  src/images


<Navbar.Brand >
<Link to="/home">
<img width="70px" height="auto" className="img-responsive" src={Logo}  alt="logo" />
               
</Link>
</Navbar.Brand>

User RK_oo7's answer in the ments section is correct. The logo's reference within the source code is correct, but the logo should be located within the public folder instead of src.

because you using react-bootstrap, and react-bootstrap documentation says, "Anytime you need to display a piece of content, like an image with an optional caption, consider using a Figure."

so maybe in your case you can first import the image file and name it with alias as you want...

import imagenameasyouwant from '../../assets/img//bootstrap-solid.png';

then you can call the imagenameasyouwant in the "figure"

<Figure><Figure.Image width={100} height={50} alt="100x50" src={imagenameasyouwant} /></Figure>

the plete documentation about react-bootstrap figure can you find at react-bootstrap documentation about figure

Had the same problem but solved it simply by adding the import statement and referencing it in the src atrribute of img.

Works fine even without Figure.

本文标签： javascriptReactbootstrap Navbar Brand logo not renderingStack Overflow