Как указать путь к картинке в html

Как написать путь к картинке в css

Начинающий программист , уже который раз , пытаясь поставить картинку на background утыкаюсь мордой в путь до нее, не понимаю как его построить, если в ссылках брузера и пути к файлу на пк всё понятно, файл один за другим через «/» , то здесь я не понимаю от чего отталкиваться. Объясните как построить путь , чтобы картинка отображалась.(underwater.png) Скриншоты с расположением файлов ниже: .

Отслеживать
задан 18 янв 2020 в 13:22
45 1 1 серебряный знак 4 4 бронзовых знака

Во-первых, это к программированию не имеет никакого отношения. Во-вторых, background-image: url(../img/underwater.png) не работает или в чём проблема? Где конкретно вам вообще нужно прописать этот путь?

18 янв 2020 в 13:30
Кирилица и пробелы в пути. Жесть
18 янв 2020 в 13:35
При импорте CSS, в site-test.html, директория не ./CSS/www/css/ а ./CSS/www/
18 янв 2020 в 16:15

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Укажите относительный путь, иными словами «путь относительно расположения css файла» у вас следующая структура проекта www — корень проекта. css1 и img — дочерние каталоги. Картинка находится в папке img. Т.к. css файл находится в папке css1

1. Начинаем перемещение относительно расположения style.css, полный путь к которому «/www/css1/style.css», иными словами, мы сейчас находимся в «/www/css1/»
2. «../» Переходим из каталога css1 в родительский каталог — www;
3. «../img/» Из родительского каталога переходим в каталог img;
4. «../img/underwater.png» Указываем нужный файл.

Почитайте подробней про относительные и абсолютные пути, и про то, как используются ключи путей «/», «..», «./», и у вас все встанет на свои места.

Отслеживать
ответ дан 18 янв 2020 в 13:38
3,054 1 1 золотой знак 8 8 серебряных знаков 22 22 бронзовых знака

Просто перенесите файл со стилями в папку www и указывайте путь так:

background-image: url(img/underwater.png); 

Отслеживать
ответ дан 18 янв 2020 в 14:26
27 7 7 бронзовых знаков

• html
• css

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.3.8.5973

Добавление рисунка

Для добавления изображения на веб-страницу используется тег , атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.

• Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg , мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
• Если перед адресом добавляется упоминание протокола http ( http:// ), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
• Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif . Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif .

Рис. 10.1. Пример размещения файлов

• Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif .

Рис. 10.2. Пример размещения файлов

В примере 10.1 показано несколько способов добавления рисунка на веб-страницу.

Пример 10.1. Вставка изображения в документ

Как правило, в качестве формата графического файла выступает GIF и JPEG.

Как указать в img путь картинки?

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

— Но фото на сайте не отображается. Почему так? как будет правильно?

• Вопрос задан более трёх лет назад
• 18995 просмотров

Комментировать
Решения вопроса 1

протокол file:/// поставь спереди

file:///C:\РАБОЧИЙ СТОЛ\Все папки\фото\Обои рабочий стол\1.jpg

Ответ написан более трёх лет назад
Vakha1 @Vakha1 Автор вопроса
Так тоже не отображается.

Vakha1, значит путь к файлу неправильный. Скопируйте из проводника.

Vakha1, в свойствах файла бывает полный путь к файлу.

Vakha1, только смотрите. Если у вас сайт на локальном хосте, у вас не будет такого доступа к файлам. А если просто .html файл открыли в браузере, то можно.

Vakha1 @Vakha1 Автор вопроса

Да у меня сайт на локальном хостинге. Это значить так указывать пути не как не получится?
Еще вопрос. Вот мне на сайте в статью нужно добавить фото это значить это фото сперва нужно будет загрузить на сервер и потом к нему указывать путь да?

Nikita-Fast @Nikita-Fast

Vakha1, для начала надо путь указать не от диска а от папки на сервере , к примеру мы имеем локальный хост с таким каталогом :

то ваши изображения должны быть не в file:/// а в папке img на локальном хосте и путь будет такой

Vakha1, да. Файлы должны быть в опубликованной папке. Иначе это была большая дыра. Ты ко мне на сайт заходишь, а я у тебя на сервере копаюсь. По этому это не получится.

Как вставить картинку в HTML

Чтобы отобразить какую-нибудь картинку на веб-странице, необходим тег . Данный тег является одиночным и строчным, а также имеет два обязательных атрибута src и alt :

При помощи атрибута src указывается путь к картинке. При помощи атрибута alt указывается альтернативный текст для картинки. Если картинка по каким либо причинам не отобразится на веб-странице, то вместо нее вы увидите альтернативный текст:

Также для изображения рекомендуется указывать ширину и высоту, это позволит браузеру быстрее загружать изображения на веб-страницу. Указывать ширину и высоту можно при помощи каскадных таблиц стилей, либо при помощи атрибутов width (ширина) и height (высота):

Единицами измерения по умолчанию служат пиксели, и в html-коде для ширины и высоты изображения их указывать не нужно.

Как записать путь к изображению

Если изображение и файл, в котором прописан путь к этому изображению, лежат в одной папке:

то путь будет состоять из названия изображения и его расширения:

Если картинку перенести в папку img:

то путь к ней будет начинаться с названия папки, в которой она находится:

Если файл index.html поместить в папку files:

то путь к изображению будет начинаться с конструкции ../ :

Если папку files, содержащую файл index.html положить еще в одну папку, то путь станет таким:

Всплывающая подсказка

В этом уроке познакомимся с еще одним очень полезным атрибутом, который можно применять практически ко всем тегам – это атрибут title , он служит для отображения всплывающей подсказки. Например:

title="Автомобиль">

Если навести курсор на картинку, то появится всплывающая подсказка: