Как правильно указать пути к изображениям на сайте

Здравствуйте дорогие читатели блога BlogGood.ru!
Сегодняшняя статья не большая, но в себе несет полезную информацию, которая поможет правильно указать путь к изображению, когда вы создаете веб-сайт, так как неправильно указанный путь к изображению не выдаст желаемый результат.  Не знаю как у вас, но у меня бывали косяки, когда нужно было прописать путь не к папке с файлом, а, наоборот, из папки к файлу. Знаю, тяжело понять мной сказанные слова, вот по этой причине я создал специальные схемки, где стрелкой показываю, откуда нужно указать путь к изображению (это может быть также любой файл).

Схемка № 1

Путь из файла к картинке

<img src="logo.png">

Схемка № 2

Путь из файла к папке до картинки

<img src="images/logo.png" >

/ - слэш символ используют для открытия папки.

Схемка № 3

Путь из папки к картинке

<img src="../logo.png">

../ - слэш с двумя точка используют для того, чтобы выйти из папки .

Схемка № 4

Путь из папки к дугой папке до картинки

<img src="../images/logo.png">

/ - слэш символ используют для открытия папки;

../ - слэш с двумя точка используют для того, чтобы выйти из папки .

Если вам нужно выйти с двух папок и зайти в папку images к файлу «logo.png», нужно добавить два символа  «../». Пример:

<img src="../../images/logo.png">

Если вам нужно выйти из трех папок и зайти в папку images к файлу «logo.png», нужно добавить три символа «../». Пример:

<img src="../../../images/logo.png">

И так далее…

Вот и все пироги. Естественно, по такому образцу путь можно указывать не только к файлам картинок, но и к другим файлам, например к js, html, css, zip, rar, и т.д.

Примеры к css-файлу:

<link href="style.css" rel="stylesheet" ENGINE="text/css" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<link href="../style.css" rel="stylesheet" type="text/css" />

<link href="../css/style.css" rel="stylesheet" type="text/css" />

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

5 Ответов на комментарий - Как правильно указать пути к изображениям на сайте

1. Тамара Полякова

   30.10.2014 в 21:50

   Вроде так все понятно с картинками, а когда переходим к другим файлам, немного трудновато схватить без твоей схемки. Но буду разбираться! Спасибо Степан за твои полезные для начинающих уроки! Удачи тебе!
2. Сергей

   21.03.2017 в 10:55

   Отличная статья, я тут 3 дня не знаю как мне с разных сайтов загружать картинки в одну папку, а тут на тебе все просто и понятно! Спасибо за статью.
3. Степан => автор блога

   27.03.2017 в 20:15

   Пожалуйста, Сергей!
4. Alex113

   18.12.2018 в 12:31

   Добрый день! Передо мной стояла задача разместить на сайте кнопку возврата в начало страницы, скрипт заработал, но никак не мог прописать путь до файла картинки, из за чего кнопка была без изображения. Ваша статья очень помогла, Спасибо большое. Всё очень наглядно и понятно.
5. Степан => автор блога

   20.12.2018 в 11:28

   Здравствуйте, я рад что моя статья помогла Вам решить вашу проблему.

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: html, Вебмастеру, для начинающих