изображения не отображаются при запуске в index.html - PullRequest
Новая
       27

изображения не отображаются при запуске в index.html

0 голосов
/ 09 ноября 2019

У меня есть простой сайт, содержащий 4 страницы: дома, о, галерея и контакт. На всех страницах, кроме 'about', полноэкранное изображение является фоновым. Страница about имеет эффект параллакса с изображениями и текстом.

Если я запускаю сайт со страницы about, все работает как шарм. Но если я начну с моей домашней страницы (index.html), на странице about не будут отображаться изображения.

Структура:

  • css map с файлом css
  • img map с изображениями
  • js map с js-файлом
  • node-modules
  • html-файлов нет ни на одной карте
  • json-файлы отсутствуют ни на одной карте

Страница с информацией о программе выглядит следующим образом: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src = "https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src = "https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script defer src="node_modules/swup/dist/swup.min.js"></script>
    <script defer src="js/script.js"></script>
    <title>About</title>
</head>
<body>
    <main>
        <div id="swup" class="transition-fade">
            <div class="wrapper">
                <nav>
                    <a href="/index.html">Home</a>
                    <a href="/about.html">About</a>
                    <a href="/gallery.html">Gallery</a>
                    <a href="/contact.html">Contact</a>
                </nav>

            <div class="parallax-container" 
                data-parallax ="scroll"
                data-position ="top"
                data-bleed-top ="100"
                data-image-src ="/img/pic4.jpg"
                data-natural-width ="180"
                data-natural-height ="80">                    
            </div>

<section>
            <div class="content">
                <h1 id="about">About</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut vero corporis doloremque saepe, eveniet eum quas praesentium culpa? Aliquid fuga mollitia rem reprehenderit necessitatibus consequuntur quos harum autem fugit. Aperiam tempora vitae earum dolorum consectetur? Aperiam, fuga, deserunt dolorem odio libero, quos consequatur perspiciatis nobis qui rem maiores. Error minima dicta ullam quas exercitationem! Optio, sint nulla cumque deserunt dignissimos dolorum exercitationem maxime culpa laborum voluptates nisi, aperiam cupiditate saepe impedit nemo laudantium dolores debitis repellat, numquam voluptatem! Deserunt, dolore autem quibusdam provident tenetur fugiat a vero corporis amet quo ab et, odio magnam facilis omnis commodi corrupti! Repudiandae, expedita.
                            <br><br>
                  </p>
              </div>
           </section>

CSS: 

.parallax-container{
    height: 500px;
    width: 100%;
}
section{
    height: 300px;
}
...