Как вывести картинку в HTML в 1С

Вывод изображения в HTML внутри 1С — типовая задача при разработке печатных форм, визуальных отчётов, дашбордов и красивых форм обработок. Проблема в том, что поле HTML-документа в 1С работает на движке браузера (в зависимости от платформы — Internet Explorer или WebKit), и не все приёмы из обычной веб-разработки срабатывают без доработки.

Существует три рабочих подхода: вставка картинки напрямую в разметку в формате base64, сохранение файла во временный каталог со ссылкой через file:// и использование внешнего URL. У каждого есть ограничения по размеру, безопасности и совместимости с тонким и веб-клиентом.

Ниже разобраны все три способа с готовым кодом на встроенном языке, типичные ошибки (битые пути, пустой фон вместо картинки, блокировка локальных файлов) и способы проверить результат.

Как устроен вывод HTML в 1С и почему картинки не отображаются «сами»

Для показа HTML в форме используется реквизит формы типа «Строка» с видом «Поле HTML документа» (в управляемых формах) либо элемент «Поле HTML документа» в обычных формах. Платформа подставляет внутрь движок браузера: в старых версиях это Internet Explorer, в современных — WebKit. От движка зависит, какие теги, стили и схемы URL поддерживаются.

Главная причина «невидимых» картинок — HTML-документ в 1С не имеет базового адреса. Относительные пути вида <img src="images/logo.png"> разрешаются не относительно вашего каталога, а относительно служебного адреса about:blank, поэтому файл не находится. Нужен либо абсолютный путь, либо внедрение данных прямо в разметку.

Вторая причина — настройки безопасности браузерного движка. Загрузка локальных файлов и смешанного контента (http-картинки на https-странице) может блокироваться, особенно в веб-клиенте, где HTML выполняется в песочнице браузера пользователя.

Способ 1: вставка картинки через base64

Самый универсальный вариант: изображение кодируется в строку base64 и вставляется прямо в атрибут src тега img через схему data:. Такой HTML не зависит от файловой системы и одинаково работает в толстом, тонком и веб-клиенте.

Пример кода, который берёт картинку из макета конфигурации и выводит её в поле HTML-документа:

ДвоичныеДанные = ПолучитьОбщийМакет("ЛоготипКомпании");
СтрокаBase64 = Base64Строка(ДвоичныеДанные);

ТекстHTML = "<html><body style='margin:0'>"
+ "<img src='data:image/png;base64," + СтрокаBase64 + "'/>"
+ "</body></html>";

ПолеHTML = ТекстHTML;

Тип картинки в data-URI должен соответствовать файлу: image/png, image/jpeg, image/gif, image/svg+xml. Если указать неверный тип, часть движков всё равно отрисует картинку, но полагаться на это не стоит.

Когда base64 не подходит

Не используйте этот способ для больших фотографий и галерей: строковые операции с мегабайтными данными в 1С медленные, а поле HTML-документа может подвисать при рендеринге. В таких случаях лучше временные файлы или уменьшение изображения перед выводом.

Способ 2: ссылка на временный файл

Если картинок много или они большие, их сохраняют на диск во временный каталог, а в HTML подставляют абсолютный путь. В толстом и тонком клиенте это работает стабильно.

ИмяФайла = ПолучитьИмяВременногоФайла("png");
ДвоичныеДанные.Записать(ИмяФайла);

ТекстHTML = "<html><body>"
+ "<img src='" + ИмяФайла + "'/>"
+ "</body></html>";

Обратите внимание: путь подставляется без префикса file:// — большинство движков корректно воспринимают и просто путь Windows вида C:\Users\...\AppData\Local\Temp\.... Если картинка не отображается, попробуйте вариант file:/// + путь с прямыми слешами.

Файлы из временного каталога система рано или поздно удалит, поэтому ссылаться на них «на постоянку» нельзя. Если HTML сохраняется (например, в письме или в файле на диске), встроенный base64 надёжнее ссылки.

Способ 3: внешняя ссылка http/https

Если картинка лежит на веб-сервере или в публичном хранилище, достаточно обычного тега <img src="https://..."/>. Это самый простой код, но он добавляет внешние зависимости: без интернета или при недоступности сервера вместо картинки будет пустое место.

Дополнительный нюанс — прокси и авторизация. Если ресурс требует логина, браузерный движок внутри 1С может не пройти проверку подлинности, и изображение не загрузится. Для внутренних корпоративных ресурсов проверяйте доступность адреса с машины, где работает клиент 1С, а не только с сервера.

Сравнение вариантов

Base64 в разметке

Работает везде, включая веб-клиент; не подходит для больших изображений и галерей из-за роста объёма.

Временный файл + путь

Быстро и экономно для толстого и тонкого клиента; не работает в веб-клиенте, файлы нужно чистить.

Внешний URL

Минимум кода; зависит от сети, прокси и доступности ресурса, возможны блокировки смешанного контента.

Пошаговый вывод картинки: от макета до формы

Типовой сценарий: логотип хранится в общем макете конфигурации, его нужно показать в шапке HTML-отчёта на форме обработки.

1. 1
   Добавьте в конфигурацию общий макет типа «Двоичные данные» и загрузите в него PNG или JPEG.
2. 2
   В форме создайте реквизит типа «Строка» (неограниченная длина) и элемент «Поле HTML документа», связанный с этим реквизитом.
3. 3
   В модуле формы получите макет через ПолучитьОбщийМакет(), преобразуйте в Base64Строка().
4. 4
   Соберите HTML-строку с тегом <img src='data:image/png;base64,...'> и присвойте её реквизиту.
5. 5
   Откройте форму и проверьте, что картинка видна, пропорции не искажены, а при изменении размера формы вёрстка не «плывёт».

Для управляемых форм важно, чтобы реквизит имел неограниченную длину — иначе длинная base64-строка обрежется, и картинка будет битой. Длина строки задаётся в свойствах реквизита формы (пустое значение длины означает «неограниченно»).

Типичные ошибки и как их исправить

Ещё одна частая ситуация — картинка видна, но с серой рамкой или значком «битого изображения» в старом движке IE. Обычно это признак того, что base64-строка содержит переносы строк. Некоторые функции кодирования вставляют переводы строк каждые 76 символов; перед вставкой в HTML их нужно удалить:

СтрокаBase64 = СтрЗаменить(СтрокаBase64, Символы.ПС, "");
СтрокаBase64 = СтрЗаменить(СтрокаBase64, Символы.ВК, "");

Если картинка нужна в нескольких местах одного HTML (например, логотип в шапке и подвале), вставьте base64 один раз в CSS как background-image для класса и применяйте класс — итоговая строка HTML будет заметно короче, чем при дублировании data-URI в каждом теге img.

Как проверить, что всё работает правильно

После внедрения проверьте результат не только «глазами», но и в целевом окружении. Поведение движков отличается, особенно между старым IE-режимом и WebKit.

Контрольные точки

Как проверить результат

Отображение картинки

Норма

Изображение видно сразу после открытия формы, без значка битого файла

Тревожный признак

Пустая рамка, крестик или серый фон вместо картинки

Целевой клиент

Норма

Картинка отображается в том же типе клиента, где работают пользователи (тонкий/веб)

Тревожный признак

Работает только на машине разработчика

Размер и пропорции

Норма

Картинка масштабируется по заданным width/height без искажений

Тревожный признак

Картинка обрезана или растянута

Скорость открытия формы

Норма

Форма открывается без заметной паузы

Тревожный признак

Задержка в секунды — признак слишком большого base64

Если картинка не отображается, откройте сформированный HTML в обычном браузере: сохраните строку в файл .html и посмотрите, что происходит. Браузер покажет ошибку явнее, чем поле HTML-документа в 1С, и это сократит поиск причины.

Частые вопросы

Можно ли вывести картинку из справочника (например, фото товара)?

Да. Получите двоичные данные из реквизита хранилища значений: Данные = Ссылка.Фото.Получить();, затем закодируйте через Base64Строка() и вставьте в data-URI. Предварительно проверяйте, что значение не NULL, иначе в HTML попадёт пустой src.

Почему в веб-клиенте не работает вариант с временным файлом?

Потому что код ПолучитьИмяВременногоФайла() выполняется на сервере, а HTML рендерится в браузере пользователя на другом компьютере. Путь к серверному диску для браузера недоступен. В веб-клиенте используйте base64 или публикуйте картинки на веб-сервере.

Как вывести несколько картинок в одном HTML?

Соберите массив base64-строк и вставьте каждую в свой тег img, либо сформируйте HTML-таблицу. Для большого количества изображений уменьшайте их размер перед кодированием — это ускорит и формирование строки, и рендеринг.

Картинка в base64 отображается в браузере, но не в 1С. Что проверить?

Чаще всего виноваты переносы строк внутри base64 или обрезанная длина строкового реквизита. Удалите символы ПС/ВК из строки и убедитесь, что реквизит формы имеет неограниченную длину. Также проверьте, какой движок использует ваша версия платформы.

Можно ли вывести SVG-картинку?

Да, двумя способами: вставить SVG-разметку прямо в HTML или закодировать файл в data:image/svg+xml;base64. Первый вариант компактнее, но поддержка SVG зависит от движка — в старых IE-режимах могут быть проблемы, в WebKit работает корректно.

Как обновить картинку без переоткрытия формы?

Достаточно заново присвоить реквизиту формы новую HTML-строку — поле HTML-документа перерисуется автоматически. Если картинка берётся из временного файла, запишите файл заново и добавьте к пути случайный параметр (?v=...), чтобы движок не взял старую версию из кэша.