Создание страницы HTML / CSS, но изображения не загружаются - PullRequest
2 голосов
/ 20 июня 2019

Я создаю свой первый веб-сайт на HTML / CSS, но по какой-то причине ни одно из моих изображений не отображается при загрузке HTML-файлов в Chrome.Когда я нажимаю F12 и захожу в меню «Источники», я вижу, что мой файл index.html (куда должны загружаться изображения) создает ошибки, говорящие о том, что файлы не могут быть найдены (net :: ERR_FILE_NOT_FOUND), даже еслиЯ использовал средство выбора файлов Visual Studio для перехода к ним вместо того, чтобы вручную вводить адреса.

Вот ссылка на файл на случай, если это поможет обеспечить больше контекста (рассматриваемая область - это поле внизу страницы): [отредактировано] /

Я попытался очиститьмой код из таблицы стилей CSS, проверяющий адреса изображений, но, к сожалению, это все, что я знаю, чтобы попробовать на этом этапе моего обучения.

HTML для поля, в котором я хочу поместить фоновое изображение:

<div class="p-box">
<h1>Hello</h1>
<h2>Goodbye</h2> 
</div>

CSS для класса этого блока:

.p-box{
    width: 800px;
    height: 500px;
    border: 1px solid #000000;
    margin-top: 30px;
    position: relative;
    background-image:url('/css/images/download.jpg'); 
   }

Цель состоит в том, чтобы получить изображение для загрузки внутри контейнера 'p-box', но ничего не происходит, когда я сохраняю и обновляю файл в своем браузере.

Это мой первый сайт (и мой первый пост здесь), поэтому любые отзывы очень ценятся.Спасибо!

Ответы [ 3 ]

0 голосов
/ 20 июня 2019

У вас может быть проблема с расположением html-файла. Вам может понадобиться только изменить URL-адрес изображения:

background-image: url('../css/images/download');

Если ваш html-файл находится внутри папки css или папки images, он не будет загружаться правильно.

если ничего не помогает, просто сделайте это:

background-image: url('http://connerring.com/css/images/download.jpg');
0 голосов
/ 20 июня 2019

Похоже, вы загружаете образ с диска вместо локального пути для check.png

в вашем css, найдите это:

list-style-image: url('E:\Desktop\HTML and CSS\CSS Tutorial Files\css\images/check.png');

и изменить на

list-style-image: url('/css/images/check.png');

Вот хорошая информация о том, как узнать пути к файлам в браузере

0 голосов
/ 20 июня 2019

Похоже, вы либо поняли это, либо что-то еще блокирует это на вашей стороне.Я четко вижу http://[site имя отредактировано] .com / css / images / download.jpg имеет изображение.Я также вижу нижнюю часть страницы с надписью «Привет и прощай», наложенной на картинку.

Желаем удачи в вашем проекте!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...