Как вставить картинку в 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 из папки становится обычной рабочей задачей. Это одна из основ, без которой сложно строить аккуратную и предсказуемую верстку.
