Як вставити картинку в HTML з папки — це базове питання, з якого починається робота з версткою. Якщо шлях до файлу вказано правильно, зображення відобразиться одразу; якщо ні — браузер покаже порожнє місце або значок битого файлу.
Базовий тег для вставки зображення
Для додавання картинки в HTML використовують тег img. Найпростіший варіант виглядає так:
<img src=”images/photo.jpg” alt=”Опис зображення”>
Атрибут src вказує на шлях до файлу, а alt описує зображення для доступності та у випадку, якщо картинка не завантажилась.
Як правильно вказати шлях до файлу
Найчастіше зображення лежать у папці всередині проєкту, наприклад images, img або assets. У такому разі шлях є відносним і залежить від місця, де лежить HTML-файл.
- Якщо HTML і папка з картинкою в одному рівні: <img src=”images/photo.jpg” alt=”Фото”>
- Якщо картинка в тій самій папці, що й HTML: <img src=”photo.jpg” alt=”Фото”>
- Якщо потрібно перейти на рівень вище: <img src=”../images/photo.jpg” alt=”Фото”>
Головне правило: браузер шукає файл саме за тим шляхом, який ви вказали. Навіть одна зайва літера в назві папки або файлу може зламати відображення.
Типові помилки, через які картинка не показується
Якщо зображення не відкривається, перевірте кілька речей. Спочатку переконайтеся, що назва файлу написана без помилок і збігається за регістром літер. На деяких серверах Photo.jpg і photo.jpg — це різні файли.
Також зверніть увагу на формат: найпоширеніші варіанти — .jpg, .png, .webp і .gif. Якщо файл має інше розширення або пошкоджений, браузер його не відобразить.
Ще одна часта причина — неправильний шлях. Якщо HTML-файл перемістили в іншу папку, старий шлях може перестати працювати. У такому випадку потрібно оновити атрибут src відповідно до нової структури проєкту.
Приклад структури папок
Уявімо простий сайт з такою структурою:
- index.html
- images
- images/photo.jpg
Тоді код буде таким:
<img src=”images/photo.jpg” alt=”Фото з папки images”>
Це найзручніший варіант для невеликих сайтів, бо ви легко контролюєте, де лежать файли, і не плутаєтесь у вкладених каталогах.
Що варто пам’ятати для зручної роботи
Щоб не витрачати час на дрібні помилки, дотримуйтеся кількох простих звичок:
- давайте файлам короткі й зрозумілі назви без пробілів;
- зберігайте картинки в окремій папці;
- перевіряйте розширення файлу;
- використовуйте описовий alt для кожного зображення;
- після змін оновлюйте сторінку та очищайте кеш, якщо потрібно.
Коли ви розумієте структуру папок і принцип відносних шляхів, вставити картинку в HTML з папки стає простою рутинною дією. Це одна з основ, без якої складно будувати акуратну та передбачувану верстку.
