Html/CSS урок 7, картинки

Добрый день! Дорогие друзья просьба помочь

Урок 7, картиники. Картинки скачала из предыдущего видео урока. Для распаковки, просто открыла zip и дальше извлечь , опции куда, появляется нужная папка киномостр-assets-img туда отправила картинки, способ, кот показывает учитель наверно устаревший? в сублайме в разделе img, они появились, при клике на них в сублайме появляется изображение, на сайте его нет, только маленький квадрат, что мешает им попасть на сайт?

Спасибо заранее

HTML/CSS ур 7 картинки

student_fgnuRsLP

4 years ago

в браузере на странице сайта нажмите на любой картинке правой кнопкой и выберите "открыть картинку в новой вкладке" - эта картинка должна открыться в новой вкладке (картинка видна у вас или так же пустой квадрат?) - в адресной строке вы увидите ссылку на картинку - проверьте верная ли эта ссылка?

Yuri Smirnov

4 years ago

мешает картинкам попасть на сайт скорее всего указанный путь к картинке, если вы изменили название папки где картинки, тогда и поменяйте путь к картинке, указанный в коде страницы, если путь не меняли - убедитесь что при размещении картинки в коде путь к ней указан верно

а также после изменения кода перезагрузите страницу с обновлением кэша - т.е. Shift+F5 или Ctrl+F5

Yuri Smirnov

4 years ago

Большое спасибо за Ваш ответ!

Картинки были приложены к видеоуроку. Все что нужно было, просто перенести их в файл img те они вынесены из zip который дан к уроку , все делаю ровно по инструкции преподователя. Те они просто скопированы и извлечены в img из раздела assets. Ничего не менялось и путь прописан с указанием папок и названием картинки. КТо проходит этот раздел, может быть подскажет, потому что пока все таки не понимаю проблему

Юрий страницу сайта перезагрузить?

Благодарю еще раз, очень прошу помощи или не могу двигаться дальше!

student_fgnuRsLP

4 years ago

Да, обновите страницу сайта в браузере нажав Ctrl+F5

Если картинки не появятся, пришлите html-код + css-код посмотреть и сриншот из вашего sublimetext

Yuri Smirnov

4 years ago

<div class="content">

<h1>Новые фильмы</h1>

</div>

<h1>Новые сериалы</h1>

</div>
</div>

</div>

Юрий, добрый день! Это прописан путь, не могу прикрепить скриншот, подскажите как (((

Спасибо заранее

student_fgnuRsLP

4 years ago

Юра, добрый день!

Спасибо, что участвуете в решении моей проблемы

file:///C:/Users/Dell/Desktop/kinomonster/assets/img/matrix.png, при клике

Your file couldn’t be accessed
It may have been moved, edited, or deleted.

Вы не можете получить доступ к файлу тк он был перемешен, отредактирован или удален. Что то при перемешении наверно было не так в файл img в сублайме в меню, я кликаю на img и дальше на папку и выскакивает перечень фильмов, но перед каждым названием стоит квадратик, такой же, как и на сайте в строке картинок.

Преподователь просто переносит их кликом из вынесенной папки в img для папки kinomonster, но у меня из зипа просто выводит на извлечь и ты выбираещь куда, может быть здесь проблема, хотя когда кликаешь на фильм в меню sublime изображение картинки появляется

ERR_FILE_NOT_FOUND

Спасибо!

student_fgnuRsLP

4 years ago

зайдите на диске в указанную папку (через Проводник windows) и посмотрите что там у вас

чтобы быть уверенным - скачайте архив на диск С: в рабочую папку и распакуйте его ("извлечь файлы из архива") - выделите переместите файлы картинок в нужную папку /assets/img/ - создайте на диске необходимые папки, выделите картинки и перетащите либо "вырезать" и "вставить" в нужную папку.

если это задача кажется сложной и есть непонятные моменты - рекомендую освоить/расширить базовые навыки работы с компьютером - создание папок, файлов, копирование, перемещение, работа с файловыми менеджерами (проводник и т.п.), работа с архивами zip, работа с браузерами, интернет, работа с документами, текст, таблицы, гугл-документы и т.д. Вам далее всегда нужно будет создавать файлы, папки, перемещать объекты, заливать на хостинг, управлять сайтом, делать резервные копии и т.д.

Yuri Smirnov

4 years ago

Большое спасибо

Буду разбираться!

student_fgnuRsLP

4 years ago

Привет Юра

Нужно применить правильный путь

Пример;

у вас корень проекта progect

"-" это вложеность относительно папки progect

- в тойже папке

-- уровень выше

-index.html

-css/

--style.css

-img/

--image.jpg

путь к картинке относительно index.html будет <img src="/images/image.jpg">

В вашем случае возможно

это не точно так как не знаю струкруту ваших файлов и папок

Схематически так по путям отночительно файла index.html

index.html

/css/tyle.css

/img/image.jpg

Таким образом как вы сделали "без слеша" можно указать только файл

/ - папка в той же деректории

../folder/ - папка folder в деректории ниже чем текущий файл

надеюсь понятно обьяснил

это в вашем случае без использования домена.

почитайте про абсолютные и относительные ссылки

Дмитрий Бабич

4 years ago

9 ответов