Как писать путь к картинке в 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 золотой знак 7 7 серебряных знаков 22 22 бронзовых знака

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

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

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

• html
• css

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

Связанные

Похожие

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

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

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

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

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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

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

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

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

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

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

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

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

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

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

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

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

Nikita-Fast @Nikita-Fast

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

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

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

—
Длительность: 6:53

Итак, этот урок, на самом деле, имеет первостепенную важность. Просто важный-важный-важный, очень важный сейчас урок. Его порой сложновато-таки понять, поэтому читайте внимательно, и после урока ещё обязательно попишите сами код, повставляйте картинки, попрописывайте пути, чтобы закрепить это окончательно и не забыть. К тому же, правила, которые я сейчас буду говорить относятся абсолютно ко всем путям, которые вы используете при разработке сайтов. Те же самые правила, которые вы используете, когда прописываете путь к CSS-ке, те же самые правила, когда вы прописываете путь к картинке, или, когда вы будете в CSS прописывать пути к картинкам. Всё идёт от одного и того же, поэтому поехали!

Итак, давайте для начала, перенесу картинку в корень.

И в значении src оставлю просто название «Audi».

Я просто прописываю название нашего файла.

Внимание, этот файлик лежит в одной папке с «index.html». Поэтому, если мы пишем просто название файла, то открываются все файлики, которые лежат в той же папочке, где и наш файл, в котором мы прописываем код. То есть, если бы это была другая html-ка, которая лежала бы в другом месте, то исходные пути считались бы относительно этой html-ки. В данном случае у нас идёт отсчёт от нашего index.html.

Дальше мы эту картинку переносим в папочку «img», поэтому в src прописываем «img/».

Как это работает? Вы прописываете название папочки, в которую нужно перейти, в данном случае папочка «img». Ставите «/» и после него пишите файл, который нужно найти.

Если у вас файлик jpg или gif, то пишите jpg или gif. То есть вдруг вы там перепутаете, что нужно приписывать «png». Вы пишите полностью название файла с его расширением либо png, либо jpg, либо gif. В принципе, это те расширения, которые используются.

Итак, мы прописали пути к нашим папочкам, к нашему файлику. В принципе, сейчас всё легко. В начале пути слеш не ставите.

А что если вдруг у нас получится вот такая вот ситуация? Наша папочка «img» лежит не в корне нашего проекта, а немножчко назад, то есть в предыдущей папке.

То есть если вы поставите вот так «», то у нас ничего не откроется. Поэтому мы в начале мы ставим две точки и слеш:

Всё правильно прописали и открылось.

Разница в чём? Во-первых, есть такая тема, как абсолютные пути и относительные пути. Абсолютный – это тот путь, который мы с вами сейчас прописали, то есть относительно корня вашей файловой системы. Ни в коем случае так прописывать не надо. Многие по началу пишут именно так, потом закидывают на сервер и говорят: «А почему не открываются картинки?» Потому что вы прописали абсолютный путь, то есть, если вы закидывает на другой компьютер ваш проект, то этот путь абсолютно меняется. То есть, если там был «Иванов Кирилл» логин вашего аккаунта, то всё меняется. Получается, у другого человека будет другое название аккаунта и как минимум вот этот вот параметр изменится. Если вы перешли на Windows, кинули там с Mac’а или с Windows на Mac, то вообще этот путь изменится и будет другим. Поэтому обязательно всегда прописываем относительные пути относительно вашей папочки с «index.html».

Давайте с CSS-кой помудрим немножечко. В данном случае CSS-ка лежит в корне проекта, рядом с «index’ом», поэтому мы просто пишем название нашего файла.

Если мы захотим разделить всё это на подпапочки, то в пути добавляем папку ( и создаем ее в корне проекта) «css» и в нее закидываем «style.css».

То есть, если у вас потом будет много CSS-ок, то мы можем их просто закинуть в одну папку «css» и там все файлики держать, чтобы у нас не было хлама в корне.

Скажу вам на будущее: если вдруг что-то не подключается, не работают картинки, CSS-ка вдруг не подключилась, стили не задаются, то обязательно, в первую очередь, проверьте, как вы прописали пути. В самую первую очередь проверьте, есть ли у вас слеши вначале. Если у вас абсолютные пути прописаны, то удаляйте их к чертям и ставьте относительные пути. Если правильно, значит вы молодец, всё должно работать, ищите в другом проблему. Но, скорее всего, в первую очередь, смотрите на прописание путей. Самая частая по началу ошибка, когда не работают картинки, не получаются CSS-ки, там что-нибудь ещё не подключается, скорее всего, вы неправильно прописали пути. Поэтому после урока сразу же попрописывайте разные пути, поэкспериментируйте с этим, закрепите у себя в голове, потому что через час вы уже забудете всё, что я вам рассказывал, и потом будет паника: «Почему не подключаются файлики?»

Это очень важная тема, и она будет вас преследовать абсолютно всю жизнь. Поверьте мне. Поэтому хорошо её закрепите и попрактикуйтесь. Всё, надеюсь, у вас всё будет классно с этим уроком. Давайте, удачи! Идите дальше.

—
Длительность: 6:53

И вот мы дошли до самого классного и прикольного тега – тега «img», – который позволяет нам картинки вставлять на страницу.

Давайте я вам сначала покажу картинку. Я нашёл вот такую вот картинку Audi.

Я просто очень люблю Audi, поэтому я в уроках всегда вставляю Audi.

Давайте напишем тег «img» и пропишем вот такой непонятный код:

Теперь у нас на странице проявится эта картинка.

Как, собственно, всё это работает? Мы пишем тег «img». Он одиночный, у него нет закрывающего тега. У нас есть атрибут «src», сокращенно от «source». И да, если кто не понял «img» от слова «image» – от слова «картинка». «Source» – путь, то есть мы прописываем путь к картинке, где она у нас лежит. Об этом мы отдельно ещё поговорим в следующем уроке. И атрибут «alt», который позволяет задать описание нашей картинке. Давайте напишем: «Описание картинки».

Для чего нам нужен атрибут alt? Дело в том, что, опять же, когда поисковик (Яндкс, Google) заходит к вам на страницу, он не может посмотреть на страницу и увидеть картинку, то есть он не на столько развит, чтобы посмотреть на картинку и понять, что на ней нарисовано. Поэтому мы пишем атрибут «alt», в котором пишем описание картинки, то есть что в ней находится, чтобы Google зашёл…

Давайте всё-таки более конкретно здесь напишем, чтобы было понятно напишем здесь Audi.

Здесь написано Audi, поэтому, когда поисковик зайдёт на эту страницу и посмотрит на тег «alt», он поймёт, что на ней нарисовано Audi. Всё-таки текст Google читать умеет.

Давайте зайдём в Google, введём в поиске Audi и зайдём в картинки.

Как видите, много здесь выдалось всяких картинок, и я на сто процентов уверен, что у каждой из этих картинок в «alt’е» есть слово Audi. Давайте любую возьмём, перейдём на страницу с этой картинкой, кликнем правой кнопкой «Посмотреть код». Что у нас написано в «alt’е»? «Ауди в лизинг».

По слову «Ауди» мы и нашли нашу картинку.

Соответственно, если вы хотите, чтобы ваши картинки в Goggle индексировались, то обязательно заполняйте атрибут «alt». Если вам в целом пофиг на это, нужны, не нужны картинки в Google, то можете не писать, главное написать тег «img src» и в нём прописать путь к картинке.

Так же хочу заметить, что сейчас вы увидели картинку, она у нас 1000х623 px. А что, если нам нужно картинку уменьшить? Для этого у нас есть два атрибута. Первый – «width», где вы можете задать ширину нашей картинки.

То есть сейчас она у нас по ширине 200 px, и высота меняется пропорционально ширине нашей картинки, то есть картинка пропорции свои не изменяет.

Соответственно. Если мы зададим ещё высоту 200 px, то картинка изменит свои пропорции, то есть ширина задана 200 px и высота тоже 200 px.

А если мы сделаем только высоту 200 px, то ширина меняется согласно пропорциям этой картинки. Поэтому, на будущее, если вам нужно изменить размер картинки, то задавайте либо ширину, либо высоту, потому что иначе пропорции будут ломаться, и тогда всё будет плохо. Либо ширину задавайте в тех пропорциях, в которых сделана эта картинка.

Если вам нужно картинку вставить в квадрат, но при этом она прямоугольная, то с помощью тега «img» вы этого не добьётесь. Как это делать, мы будем изучать уже в CSS. Там будет свойство «background» и там мы посмотрим, как это можно сделать. То есть тег «img» используется только в том случае, если картинка, которая будет вставляться на страницу, будет иметь те же пропорции, что и исходник, то есть если она у вас прямоугольная, а вам нужна квадратненькая, то тут уже не подходит. Плюс, если вам нужно картинку индексировать в поиске, то обязательно использовать тег «img». Если вы тег «img» не используете, то картинка ни каким образом индексироваться в поиске не будет.

Собственно, вот так вот всё. В следующем уроке мы разберём, как же прописывать пути.

Тестирование

Чтобы пройти тестирование, необходимо войти или зарегистрироваться