Для того, чтобы браузер смог вставить необходимое для вас графическое изображение, вы должны ответить ему на вопрос: где ОНО лежит?
Следует помнить, что
мы не вставляем картинку в страницу, мы вставляем ссылку на эту картинку. И если браузер не найдет по ссылке указанный файл, то он ничего нужного нам не отобразит!
В большинстве приведенных примеров мы рассматривали вариант, когда страница и картинка находились в одном каталоге. А что если они в разных..?
Рассмотрим возможные варианты:
 |
SRC="chef.gif" говорит о том, что картинка и web-страница лежат в одном каталоге |
 |
SRC="images/chef.gif" здесь указано на то, что в каталоге, где находится web-страница есть папка "images", в которую и помещена наша картинка |
 |
SRC="../chef.gif" в таком случае изображение находится в "родительском" каталоге для каталога с web-страницей, другими словами на уровень выше |
 |
SRC="../../chef.gif" здесь сказано, что картинка лежит на два уровня выше |
 |
SRC="../images/chef.gif" а это говорит о том, что для того, чтобы найти нашу картинку, нужно подняться на один уровень выше и от туда зайти в папку "images" |
 |
SRC="../../../other/images/chef.gif" это самый "накрученный" вариант; он "поднимает" нас на три уровня вверх, а потом заходит в каталог "other", в котором находится каталог "images", где и лежит нужная картинка |
Указание пути к файлу картинки подобным образом называется относительным (потому что оно относительно web-страницы). Также можно использовать абсолютный путь к файлу. Например: SRC="http://www.site.com/images/chef.gif". Этот способ легче, поскольку вы не можете запутаться при переходе на один или больше уровней вверх. Но у него есть один существенный недостаток: если вы захотите изменить адрес своего сайта, допустим, на http://www.my-site.com, то все изображения по адресу http://www.site.com/images/ не будут найдены и вам прийдется переписывать каждую ссылку на графический файл, которых может быть очень много. Поэтому всегда лучше испльзовать относительный путь к файлам.
