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;
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.