Изображение в компоненте React загружается на одну страницу, а на другую нет? - PullRequest
Новая
       1

Изображение в компоненте React загружается на одну страницу, а на другую нет?

1 голос
/ 09 мая 2020

Привет, ребята, очень простой вопрос. У меня есть домашняя страница и страница комнаты. Возникает вопрос, почему изображение lo go в компоненте панели навигации загружается на главную страницу, а не на страницу комнаты?

Домашняя страница выглядит следующим образом: 

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;

Страница комнаты сейчас базовая c и только: 

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;

Маршрут для изображения lo go является общедоступным / images / lo go .png. Я импортирую lo go с src = "images / lo go .png" для img в качестве стилизованного компонента в моем компоненте панели навигации.

Домашняя страница и страница комнаты находятся в одной папке : src / pages / home. js и src / pages / singleRoom. js

Панель навигации находится в папке компонентов следующим образом: src / components / navbar. js

Вот панель навигации. 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;

Наконец, вот приложение. 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;

1 Ответ

1 голос
/ 09 мая 2020

Вы используете относительный URL-адрес для атрибута src в компоненте Logo. images/logo.png указывает относительно текущего пути, поэтому для вашей домашней страницы он указывает на <url>/images/logo.png, но для страницы вашей комнаты он указывает на <url>/room/:id/images/logo.png. Если вы измените src на /images/logo.png, он всегда будет указывать на правильный файл. Для получения дополнительной информации о путях к файлам thml проверьте здесь .

...