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

Posted 2023-02-22

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

【英文标题】：Image in React component loading on one page but not the other one?

【发布时间】：2020-08-24 16:11:18

【问题描述】：

大家好，非常简单的问题。我有一个主页和一个房间页面。 问题是为什么导航栏组件中的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;

【问题讨论】：

您是在两个页面中都导入导航栏，还是在两个页面中都导入导航栏？您可以发布两个页面的完整代码吗？

@BrianPatterson 嗨，布赖恩，我正在将导航栏导入两个页面。我添加了调试所需的其他代码。如果你能看一下，我会很高兴。

确定没问题。您是否尝试过 Rodentman87 在他们的回答中提出的建议？

@BrianPatterson 是的，我做到了，它成功了 :) 谢谢

【参考方案1】：

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

【讨论】：

非常感谢。我试图添加 ./ 没有工作但 / 工作。两者有什么区别，你知道吗？

./ 表示签入同一个文件夹，与之前的相同，而 / 表示应该从网站的根目录开始