Почему не отображается изображение в HTML и как это исправить

Критическая ошибка: если вы конвертировали изображение в WebP через онлайн-сервисы, проверьте, не сохранилось ли расширение старого формата (например, image.jpg.webp). Браузер проигнорирует такой файл.

3. Проблемы с правами доступа (CHMOD) на сервере

Если путь к изображению верный, но картинка всё равно не грузится, проверьте права доступа к файлу на сервере. На Linux-хостинге (большинство shared-хостингов) файлы должны иметь права 644, а папки — 755. Если права установлены как 600 или 400, сервер не позволит браузеру получить доступ к файлу.

Как проверить и исправить:

• 🔧 Подключитесь к серверу по FTP (например, через FileZilla).
• 🔧 Найдите файл изображения, щёлкните правой кнопкой → File permissions.
• 🔧 Установите значение 644 для файла или 755 для папки.
• 🔧 Примените изменения ко всем вложенным файлам (опция Recurse into subdirectories).

Если вы используете SSH, выполните команду:

chmod 644 /путь/к/файлу/изображение.jpg

⚠️ Внимание: На некоторых хостингах (например, Hostinger или Beget) права 777 могут блокироваться по соображениям безопасности. Не устанавливайте их без необходимости!

Также проверьте, не блокирует ли доступ файл .htaccess. Иногда в нём прописаны правила, запрещающие доступ к определённым типам файлов. Например:

<FilesMatch "\.(jpg|png|gif)$">
Order Allow,Deny
Deny from all
</FilesMatch>

4. Кэш браузера и сервера: почему картинка не обновляется

Вы изменили изображение, но в браузере по-прежнему отображается старая версия? Виноват кэш — временное хранилище, которое ускоряет загрузку страниц. Кэшировать могут и браузер, и сервер (через .htaccess или CDN).

Как очистить кэш:

• 🌐 В браузере: Ctrl + F5 (жёсткое обновление) или очистка кэша в настройках.
• 🌐 На сервере: если используется Cloudflare или другой CDN, очистите кэш в панели управления.
• 🌐 В .htaccess: добавьте правило для отключения кэша изображений (временно):

<FilesMatch "\.(jpg|png|gif|webp)$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
</FilesMatch>

Если проблема возникает только у некоторых пользователей, скорее всего, виноват CDN. Например, Cloudflare может кэшировать изображения на 24 часа. В этом случае:

1. Зайдите в панель Cloudflare → Caching → Configuration.
2. Найдите раздел Browser Cache TTL и уменьшите значение до 2 часов.
3. Очистите кэш через Caching → Purge Cache.

5. Проблемы с CORS: блокировка загрузки с других доменов

Если изображение хранится на другом домене (например, вы подключаете картинку с Google Drive или стороннего хостинга), браузер может заблокировать её загрузку из-за политики CORS (Cross-Origin Resource Sharing). Это механизм безопасности, который запрещает загружать ресурсы с чужих сайтов без разрешения.

Признаки проблемы:

• 🚨 В консоли браузера (F12 → Console) ошибка: CORS policy: No 'Access-Control-Allow-Origin' header.
• 🚨 Картинка не грузится, но если открыть её URL в новой вкладке — открывается.

Решения:

• 🔄 Загрузите изображение на свой сервер (лучший вариант).
• 🔄 Если изображение с Google Drive, используйте прямую ссылку (замените uc?id= на uc?export=view&id=).
• 🔄 Настройте Access-Control-Allow-Origin на сервере, где хранится изображение (если у вас есть доступ).

Пример настройки CORS для Nginx:

location ~* \.(jpg|png|gif|webp)$ {
add_header 'Access-Control-Allow-Origin' '*';
}

⚠️ Внимание: Некоторые хостинги (например, Imgur или Flickr) специально блокируют горячую ссылку (hotlinking) на изображения. В этом случае загрузка с вашего сайта будет невозможна — только прямая ссылка.

6. Ошибки в HTML-разметке: тег <img> и его атрибуты

Иногда проблема кроется не в изображении, а в самом теге <img>. Распространённые ошибки:

• 🛠️ Отсутствует закрывающий слеш: <img> вместо <img /> (в HTML5 это не критично, но может сбивать с толку).
• 🛠️ Нет атрибута alt (обязателен для валидности и SEO).
• 🛠️ Некорректные атрибуты width и height (например, указаны в px, но без единиц измерения).
• 🛠️ Использование srcset без sizes (может ломать отображение на ретина-экранах).

Правильный пример:

<img
src="images/photo.webp"
srcset="images/photo@2x.webp 2x"
alt="Описание изображения для SEO"
width="800"
height="600"
loading="lazy"
/>

Особое внимание уделите атрибуту loading="lazy". Он откладывает загрузку изображений, которые не видны на экране, но иногда может конфликтовать с JavaScript-слайдерами или галереями. В этом случае попробуйте убрать его или использовать библиотеку lozad.js для ленивой загрузки.

7. Проблемы с хостингом: ограничения и ошибки сервера

Если все предыдущие пункты не помогли, проблема может быть на стороне хостинга:

• 📉 Превышен лимит трафика или места на диске.
• 📉 Сервер возвращает ошибку 500 или 403 при запросе изображения.
• 📉 На сервере отключена поддержка mod_expires или mod_headers (нужны для корректной работы CORS и кэша).
• 📉 Хостинг блокирует определённые типы файлов (например, SVG из-за уязвимостей).

Как диагностировать:

1. Откройте DevTools → Network и обновите страницу.
2. Найдите запрос к изображению и проверьте статус ответа (должен быть 200 OK).
3. Если статус 403 Forbidden — проблема с правами или .htaccess.
4. Если статус 500 Internal Server Error — ошибка на сервере (проверьте логи хостинга).

Пример лога ошибок Apache, который может помочь:

[Wed Jun 05 14:23:45.123456 2026] [:error] [pid 12345] [client 192.168.1.1:12345] File does not exist: /home/user/public_html/wrong/path/image.jpg

8. Конфликты с CSS и JavaScript

Иногда изображение загружается, но не отображается из-за стилей или скриптов:

• 🎨 display: none или visibility: hidden в CSS.
• 🎨 opacity: 0 или filter: blur(100px).
• 🤖 JavaScript-ошибка, которая прерывает выполнение кода (например, в слайдере).
• 🤖 Динамическая подгрузка изображений через JS, которая не сработала.

Как проверить:

1. Откройте DevTools → Elements и найдите тег <img>.
2. Посмотрите, не зачёркнуты ли стили (значит, они переопределены).
3. Отключите JavaScript в браузере — если изображение появилось, проблема в скриптах.

Пример проблемы со стилями:

img {
display: none !important; /* Изображение загружено, но скрыто */
}

Если изображение подгружается через JavaScript (например, в галерее Fancybox), проверьте консоль на ошибки. Типичная проблема — неверный селектор или опечатка в пути:

// Ошибка: опечатка в классе
document.querySelector('.galery-img').src = 'images/photo.jpg';
// Правильно:
document.querySelector('.gallery-img').src = 'images/photo.jpg';

FAQ: Частые вопросы по отображению изображений в HTML

<img src="https://drive.google.com/uc?export=view&id=YOUR_FILE_ID" alt="Google Drive Image">