Главная / Помощь / Решение проблем

Не загружаются изображения

Одна из самых распространенных проблем при использовании Конструктора. Эта проблема кроется в настройке Вашего сервера и встречается только на VPS и DS, в конфигурации web-серверов которых вносились изменения. Чинится достаточно легко, повода для паники нет.

Проявления проблемы

При  загрузки изображений не возвращается ошибка, и Конструктор ведет себя так, как будто оно загружено, но вместо изображения показывается иконка "битого" изображения, а если перейти по ссылке на изображение, Вы увидите ошибку 404.

Кто виноват

Если коротко - то проблема кроется в конфигурации Ваших web-серверов Apache и/или nginx, которая не до конца поддерживает все функции, необходимые для работы фреймворку Webasyst. Теперь подробнее. Почти любое приложение Webasyst, например, "Магазин", "Фото", и, конечно, "Конструктор", используют специальный механизм для масштабирования загруженных изображений. То есть, загруженное Вами изображение не показывается "как есть", а вначале масштабируется в эскиз. Это делается в целях оптимизации страниц, чтобы пользователям показывались сжатые картинки нужных размеров. Настройки этого механизма Вы можете видеть, например, в приложении "Магазин" в разделе "Эскизы". 

Данный механизм у всех приложений от Webasyst работает на основе файлов .htaccess и mod_rewrite Apache, что по умолчанию работает на 99% web-хостингов и в облаке Webasyst. Суть проста: пользователь запрашивает изображение в нужном разрешении, и если оно уже есть, отлично, оно сразу передается пользователю. Если же эскиза пока нет, то управление передается специальному скрипту, который создает миниатюру, а уже потом выдает ее пользователю.

Зачастую на серверах используется два web-сервера: тяжелый и умный Apache, и быстрый, но более простой, nginx. Если изображения нет, то управление должно переходить Apache, который умеет перенаправить запрос на нужный скрипт, прочитав файл .htaccess, чего nginx делать не умеет. Но, иногда, в целях ускорения работы, в конфигурации отключают использование файла .htaccess для папки контента /wa-data/, и конфигурируют nginx вручную для работы с миниатюрами каждого отдельного приложения. Это ускоряет работу, но требует настройки сервера под каждое отдельное приложение.

Важно! Мы не можем выпустить обновление, которое решает эту проблему - Конструктор работает по правилам Webasyst, а настройки сервера, при которых случается проблема, мешают работе штатных функций Webasyst, то есть, конфликтуют с этими правилами, поэтому исправлять требуется именно их.

Что делать

Вы можете справедливо заметить: ведь у меня работают картинки в "Магазине", почему не работают в Конструкторе?!! Верно, так может быть. Когда Ваш сервер конфигурировали, то, само собой, предусмотрели то, что на нем будет "Магазин", и внесли нужные настройки в nginx! Но для "Конструктора" настроек пока нет. Значит, нужно их добавить!

Ниже будет приведен пример работы нашего сотрудника технической поддержки у клиента с данной проблемой. На сервере был установлен ISP Manager. 

Важно! Если Вы не обладаете навыками конфигурирования nginx и боитесь что-то сломать, то это не зря, так как неверной конфигурацией можно уложить на лопатки весь сервер. Не уверены - обратитесь к специалисту!

Вот алгоритм работы:

1) Переходим во вкладку "www-домены", кликаем на нужный домен, чтобы он выделился, и нажимаем кнопку "Конфиг".

2) Откроется окно редактирования конфигурации nginx. Скорее всего, там уже есть конфигурационные секции для "Магазина" и "Фото", как показано на рисунке ниже:

Важно! Конфигурационные секции для приложений в некоторых конфигурациях встречаются в этом файле дважды!

3) Под секцию для "Магазина" (если их две одинаковые - то под каждую) нужно внести аналогичную секцию для "Конструктора", примерно так:

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

# landings app
location ~* ^/wa-data/public/landings/images/[0-9]+/  {
    access_log off; 
    expires 30d; 
    error_page 404 = @landings_thumb;
}
location @landings_thumb  {
    include /etc/nginx/fastcgi_params;
    fastcgi_pass unix:/var/www/php-fpm/XXXXXXXXX.sock;
    fastcgi_param SCRIPT_NAME /wa-data/public/landings/images/thumb.php; 
    fastcgi_param SCRIPT_FILENAME $document_root/wa-data/public/landings/images/thumb.php;
} 
# end landings app

Обратите внимание, что вместо XXXXXXXXX необходимо подставить имя Вашего сокета fpm/fcgi. По сути, настройка производится так же, как и в официальном гайде от Webasyst (https://developers.webasyst.ru/docs/installation/tips/nginx-fastcgi/).

UPD: Если Вы используете плагин "Изображения webp"

Некоторые наши пользователи используют плагин для работы с webp изображениями. Для дополнительной настройки для этого плагина обратитесь к его документации.

Готово! Теперь Ваш сервер сконфигурирован, чтобы работать с "Конструктором".

Информация