React-bootstrap Navbar Brand logo not rendering

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: 'Welcome 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;

Answer

User RK_oo7’s answer in the comments 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.

Advertisement

Answer