React 组件中的图像加载在一个页面上而不是另一页上？

Question

大家好，非常简单的问题。我有一个主页和一个房间页面。 问题是为什么导航栏组件中的logo图片加载到首页而不加载到房间页面？

首页如下：

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;

房间页面现在是基本的，只有：

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;

标志图片的路径是public/images/logo.png。我将带有 src="images/logo.png" 的徽标导入 img 作为导航栏组件中的样式组件。

主页和房间页面都在同一个文件夹中：src/pages/home.js 和 src/pages/singleRoom.js

导航栏在components文件夹中如下：src/components/navbar.js

这里是 navbar.js 代码：

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;

最后，这里是 App.js 代码：

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

您正在为 Logo 组件上的 src 属性使用相对 url。 images/logo.png 相对于当前路径，因此对于您的主页，它指向<url>/images/logo.png，但对于您的房间页面，它指向<url>/room/:id/images/logo.png。如果您将src 更改为/images/logo.png，那么它将始终指向正确的文件。有关 thml 文件路径的更多信息，请查看here。