Почему изображения на странице видны только на моем компьютере и не отображаются на другом?

Влад Мержевич

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

Пример 1. Изображение видно только на моем компьютере

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пути</title>
 </head>
 <body>
  <p><img src="file:///y:/home/webref/www/images/screenshot.png" 
   alt="Дизайн" width="150" height="90"></p>
 </body>
</html>

Чтобы устранить указанный недостаток, необходимо искоренять локальные адреса и заменять их относительными. Тогда значение атрибута src в примере 1 заменится на images/screenshot.png. В примере 2 показаны варианты указания адресов изображений на странице.

Пример 2. Адреса изображений

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пути</title>
 </head>
 <body>
  <p><img src="images/1.png" alt="Путь к файлу 1.png, расположенному в папке images"
     width="150" height="90"></p>
  <p><img src="/images/2.png" alt="Папка images лежит в корне сайта" 
     width="150" height="90"></p>
  <p><img src="../images/3.png" alt="Перейти на уровень выше в иерархии папок и 
     открыть файл 3.png, расположенный в папке images" width="150" height="90"></p>
 </body>
</html>

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.