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

Question

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

首页如下：

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

导航栏位于组件文件夹中，如下所示：src/components/navbar.js

这是 navbar.js 代码：

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;

最后，这是 App.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;

Answer 1

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