У прикладі 1 показано використання локального адреси, який призводить до того, що на інших комп'ютерах, а також після публікації на сайті, зображення стає недоступний.
Приклад 1. Зображення видно тільки на моєму комп'ютері
HTML5IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset= "utf-8"> <title>Шляхи</title> </head> <body> <p><img src="file:///b:/home/html-css/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>