Отсутствующие изображения в HTML-файле - PullRequest
Новая
       7

Отсутствующие изображения в HTML-файле

0 голосов
/ 31 августа 2018

Следующий HTML-код: 

<div class="main-container">
    <div id="top-section-main">
        <div id="top-section-content">
            <h1>Awesome looks so good</h1>
            <p>Awesome is the landing page you wish you had when you started</p>
            <p class="playBTN"><img src="Images/9.1 Play.png" height="120px" width="120px"></p>
            <div class="main-form">
               <form>
                   <h6>SIGN UP FOR A FREE 30 DAY TRIAL</h6>
                   <input type="text" name="name" placeholder="Name">
                   <input type="email" name="email" placeholder="Email">
                   <button style="trial" type="submit" value="submit">Start Free Trial</button>
               </form>
            </div>
        </div>
    </div>
</div>

И это соответствует CSS: 

#top-section-main{
background-image: url(/Images/6.1\ Friends.jpg);
height: 740px;
border: none;
}
#top-section-content{
width: 60%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
#top-section-content h1{
font-size: 4em;
font-weight: 300;
color: #ffffff;
text-align: center;
margin: 0;
padding-top: 100px;
}
#top-section-content p{
font-size: 1.3em;
font-weight: 400;
color: #ffffff;
text-align: center;
margin-top: 10px;
}
.playBTN{
text-align: center;
margin: auto;
padding: 50px 0 100px 0;
}
.main-form h6{
font-family: sans-serif;
font-size: 0.9em;
font-weight: 100;
color: #ffffff;
text-align: center;
}
.main-form input{
width: 30%;
margin: 0;
height: 40px;
font-family: sans-serif;
font-size: 15px;
padding-left: 15px;
font-weight: 100;
border: none;
}
.main-form button{
width: 30%;
height: 42px;
font-family: sans-serif;
font-size: 15px;
padding-left: 15px;
font-weight: 100;
background-color: #6dc77a;
color: #ffffff;
border: none; 
}

Это проблема со статической веб-страницей, которую я создал. Когда это запускается через саму IDE (VScode), это не проблема, и каждое изображение отображается. Но когда я открываю html-файл отдельно от папки, несколько изображений отсутствуют. Я проверил путь к изображениям, и он выглядит хорошо (обратите внимание - все изображения присутствуют в папке). Есть идеи о том, что могло пойти не так?

1 Ответ

0 голосов
/ 31 августа 2018

несколько изображений отсутствуют

Какие отображаются, а какие отсутствуют? Пожалуйста, будьте более конкретны при сообщении об ошибке. Где ваша таблица стилей относительно вашей HTML-страницы? Нет <link> в вашем коде, поэтому у нас нет этой информации.

(я не знаю, чем VSCode отличается от обычного браузера) Если в вашем HTML-коде отображается элемент img, фоновое изображение должно выглядеть как background-image: url("/Images/6.1 Friends.jpg");. Попробуйте удалить косую черту, если она по-прежнему не отображается.
Если ваша таблица стилей не находится в том же каталоге, что и ваша разметка, то у вас все еще может быть проблема: эта косая черта - это корень ваших файлов, который является известным местом на веб-сервере (протокол http(s):// в вашем браузере), но является корнем файловой системы вашей ОС с файлом: /// протокол.
Более общее примечание: когда относительный путь ресурсов CSS зависит от местоположения этого CSS, а не от вашей HTML-страницы.

OT: alt атрибут обязателен для <img> элементов. Должно быть alt="" для декоративных изображений и alt="something meaningful" для изображений, несущих информацию (для получения дополнительной информации см. WAI )

...