Image in React component loading on one page but not the other one?

Question

Hi guys very simple question. I have a home page and a room page. The question is why is the logo image in the navbar component loading in the homepage but not in the room page?

The home page is as follows:

import React from 'react';
import Hero from '../components/hero.js';
import NavBar from '../components/navbar.js';
import Services from '../components/services.js';
import FeaturedRooms from '../components/featuredRooms.js';
import Consultation from '../components/consultation.js';
import Footer from '../components/footer.js';

const Home = () => {
    return (
        <React.Fragment>
            <NavBar/>
            <Hero/>
            <Services/>
            <FeaturedRooms/>
            <Consultation/>
            <Footer/>
        </React.Fragment>
    );
}

export default Home;

The room page is basic right now and is only:

import React from 'react';
import NavBar from '../components/navbar';
import Footer from '../components/footer';

const RoomPage = () => {
    return (
        <React.Fragment>
            <NavBar/>
            <Footer/>
        </React.Fragment>
    );
}

export default RoomPage;

The route for the logo image is public/images/logo.png. I import the logo with src="images/logo.png" for an img as a styled component in my navbar component.

Both the homepage and the room page are in the same folder: src/pages/home.js and src/pages/singleRoom.js

The navbar is in the components folder as follows: src/components/navbar.js

Here is the navbar.js code:

import React from 'react';
import styled from 'styled-components';
import {Link} from 'react-router-dom';
import {LinkWithNoStyling} from './shared';

const Header = styled.header`
  display: flex;
  justify-content: flex-end;
  padding: 10px 10%;
  box-sizing: border-box;
  background-color: rgb(251, 251, 251);
`;

const Logo = styled.img`
  height: 30px;
  /* explanation: margins top and bottom for flex child center vertically, given a margin right of auto and left of 0 we make it stick to the left. */
  margin: auto auto auto 0;
`;

const UnorderedList = styled.ul`
  list-style: none;
  display: flex;
`;


const ListItem = styled.li`
      margin-left: 35px;
`;

const MenuAnchor = styled.a`
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    color: black;

    &:hover {
        color: rgb(161, 113, 1);
    }
`;

const Navbar = () => {
    return (
        <Header>
            <Logo src="images/logo.png"/>
            <nav>
                <UnorderedList>
                    <ListItem>
                        <LinkWithNoStyling to="/">
                            <MenuAnchor href="">Home</MenuAnchor>
                        </LinkWithNoStyling>
                    </ListItem>
                    <ListItem>
                        <LinkWithNoStyling to="/rooms">
                            <MenuAnchor href="">Rooms</MenuAnchor>
                        </LinkWithNoStyling>
                    </ListItem>
                </UnorderedList>
            </nav>
      </Header>
    );
}

export default Navbar;

Finally, here is the App.js code:

import React from 'react';
import './App.css';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import Home from './pages/home';
import NotFound from './pages/notFound';
import Rooms from './pages/rooms';
import RoomPage from './pages/roomPage'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route path="/" component={Home} exact/>
          <Route path="/rooms" component={Rooms} exact/>
          <Route path="/room/:id" component={RoomPage} exact/>
          <Route path="/" component={NotFound}/>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Answer 1

You're using a relative url for the src attribute on the Logo component. images/logo.png points relative to the current path, so for your home page, it points to <url>/images/logo.png, but for your room page, it points to <url>/room/:id/images/logo.png. If you change your src to /images/logo.png, then it will always point to the proper file. For more info about html file paths, check here.