Как добавить картинку в HTML в 1С

Задача вставить изображение в HTML-документ внутри 1С возникает при формировании писем, печатных форм, отчётов и справочных страниц, которые выводятся в поле HTML-документа. Проблема в том, что стандартный тег <img src="..."/> со ссылкой на локальный файл часто не работает: встроенный браузер не имеет доступа к диску или путь указан неверно. Поэтому в 1С применяют несколько обходных приёмов, и выбор зависит от того, где хранится картинка и где будет показан документ.

Основных подхода три: вставка через Base64-строку прямо в атрибут src, ссылка на файл во временном каталоге и ссылка на внешний ресурс по HTTP. Самый надёжный для встроенного просмотра — Base64, потому что изображение становится частью самого HTML и не зависит от путей, прав доступа и сети.

Где в 1С отображается HTML и почему это важно

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

Второй сценарий — формирование HTML-письма через объект ИнтернетПочтовоеСообщение или выгрузка HTML-файла на диск. Здесь картинка должна быть доступна уже на стороне получателя, поэтому ссылка на локальный файл вашего компьютера не сработает вообще.

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

Способ 1. Вставка картинки через Base64

Это универсальный приём: изображение читается в двоичные данные, кодируется в Base64 и подставляется в атрибут src с префиксом data:image/png;base64,. Тип в префиксе должен соответствовать формату файла: image/png, image/jpeg, image/gif, image/svg+xml.

Пример кода на встроенном языке 1С:

ДвоичныеДанные = Новый ДвоичныеДанные("C:\Images\logo.png");
СтрокаBase64 = Base64Строка(ДвоичныеДанные);

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

Элементы.ПолеHTML.УстановитьТекст(ТекстHTML); // обычные формы
// Для управляемой формы: ПолеHTMLДокумента = ТекстHTML;

Если картинка хранится в информационной базе (например, в реквизите справочника с типом «ХранилищеЗначения»), сначала получите двоичные данные из хранилища: ДвоичныеДанные = Объект.Картинка.Получить();, а дальше действуйте так же.

1. 1
   Получите двоичные данные картинки: из файла или из хранилища значения в базе
2. 2
   Закодируйте данные функцией Base64Строка()
3. 3
   Сформируйте тег img с src вида data:image/png;base64,СтрокаBase64
4. 4
   Присвойте итоговый HTML полю HTML-документа
5. 5
   Откройте форму и убедитесь, что изображение отображается

Ограничение способа — размер. Base64 увеличивает объём данных примерно на треть, поэтому фотография в несколько мегабайт превратится в очень длинную строку и замедлит формирование документа. Для логотипов, печатей, подписей и небольших иллюстраций способ подходит идеально.

Способ 2. Ссылка на локальный файл

Если HTML показывается только внутри 1С на том же компьютере, где лежит файл, можно указать путь напрямую: <img src="file:///C:/Images/logo.png"/>. Обратите внимание на три косые черты после file: и на прямые слэши в пути — обратные слэши браузер может не понять.

На практике этот способ капризен: браузерный движок может блокировать доступ к локальным файлам из соображений безопасности, а при переносе базы или запуске на сервере путь станет недействительным. В тонком и веб-клиенте локальные пути клиентской машины из серверного кода вообще недоступны.

Рабочий вариант для клиент-серверного режима — сначала поместить файл во временное хранилище или скопировать его на клиента, затем ссылаться на локальную копию. Но проще и надёжнее сразу использовать Base64.

Способ 3. Картинка по внешнему URL

Если изображение опубликовано на веб-сервере, достаточно обычной ссылки: <img src="https://example.com/images/logo.png"/>. Это стандартный подход для HTML-писем: вложения не раздувают письмо, а картинка подгружается при открытии.

Минусы очевидны: нужен постоянно доступный сервер, у пользователя должен быть интернет, а почтовые клиенты часто блокируют внешние картинки до разрешения получателя. Для внутреннего корпоративного портала или интранета способ удобен, для массовых рассылок — ненадёжен.

Сравнение способов вставки

Base64 в src

Работает везде, не зависит от путей и сети. Ограничение — рост объёма HTML примерно на треть от размера файла

Локальный файл file:///

Просто, но работает только на той же машине и зависит от настроек браузерного движка

Внешний URL

Подходит для писем и порталов, но требует доступного сервера и может блокироваться почтовыми клиентами

Картинки из макета и библиотеки картинок 1С

Часто изображение уже есть в конфигурации — в общем макете типа «Двоичные данные» или «Картинка». Получить его можно так: ДвоичныеДанные = ПолучитьОбщийМакет("ЛоготипКомпании");. Дальше данные кодируются в Base64 и вставляются в HTML, как описано выше.

Стандартные картинки из библиотеки платформы (объект БиблиотекаКартинок) напрямую в HTML вставить нельзя — они предназначены для кнопок и элементов формы. Если такая пиктограмма нужна в документе, сохраните её как файл и обработайте как обычное изображение, либо используйте собственный макет.

Проверка результата и типичные ошибки

После формирования HTML откройте форму и осмотрите результат. Если вместо картинки пустое место или значок «битого» изображения, причина почти всегда в одном из трёх: неверный MIME-тип в префиксе data:, обрезанная или повреждённая строка Base64, недоступный путь к файлу.

Для отладки выведите сформированный HTML в текстовый файл и откройте его в обычном браузере: Текст.Записать("C:\Temp\test.html"). Если в браузере картинка видна, а в 1С нет — проблема в движке поля HTML-документа, проверьте версию платформы и режим совместимости.

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

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

Отображение в поле HTML-документа

Норма

Картинка видна сразу после открытия формы, без значка ошибки

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

Пустая рамка или пиктограмма битого изображения

HTML в обычном браузере

Норма

Сохранённый файл открывается и показывает картинку

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

В браузере картинки нет — ошибка в коде формирования, а не в 1С

Письмо у получателя

Норма

Изображение видно без запроса на загрузку внешнего контента

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

Пустое место или предложение загрузить картинки

Производительность и ограничения

При массовом формировании документов (например, сотни писем с логотипом) кодируйте картинку в Base64 один раз и переиспользуйте строку, а не читайте файл в каждой итерации цикла. Это заметно ускоряет обработку.

Для больших изображений уменьшайте размер заранее — внешним редактором или обработкой на стороне 1С через объект ОбработкаКартинок, если он доступен в вашей версии платформы. Встраивать в HTML исходник с фотоаппарата нет смысла: экранное отображение всё равно ужмёт картинку до нескольких сотен пикселей.

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

Почему картинка видна в браузере, но не в поле HTML-документа 1С?

Скорее всего, используется старый движок Internet Explorer, который ограниченно поддерживает современные схемы data: или блокирует локальные файлы. Обновите платформу, проверьте режим совместимости конфигурации и попробуйте вариант с Base64 — он поддерживается шире всего.

Как вставить картинку из реквизита справочника?

Получите значение реквизита типа «ХранилищеЗначения» методом Получить() — вернутся двоичные данные. Затем закодируйте их функцией Base64Строка() и подставьте в тег img, как в примере из статьи.

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

Да, либо через Base64 с префиксом data:image/svg+xml;base64, либо вставив сам XML-код SVG прямо в тело HTML. Второй вариант не требует кодирования, но поддержка зависит от браузерного движка поля HTML-документа.

Base64-строка очень длинная — это нормально?

Да, кодирование увеличивает объём примерно на треть от размера файла, и даже небольшой PNG даёт строку в тысячи символов. Это не ошибка, но для больших файлов лучше уменьшить изображение перед вставкой.

Как вставить картинку в HTML-письмо, отправляемое из 1С?

Используйте Base64 прямо в теге img или механизм вложений с Content-ID: картинка добавляется как вложение письма, а в HTML указывается ссылка вида src="cid:идентификатор". Ссылки на локальные файлы отправителя в письмах не работают.

Работает ли Base64Строка в веб-клиенте?

Функция доступна, но чтение файла с диска в веб-клиенте требует передачи файла от пользователя через механизм помещения файлов. Если картинка уже в базе или формируется на сервере, проблем не возникает.