Рендеринг изображений

Основные принципы обработки изображений

Библиотека Marked в JavaScript является парсером Markdown, который преобразует текст в HTML. Одним из ключевых элементов Markdown является синтаксис для вставки изображений:

![alt-текст](url "title")

Где:

  • alt-текст — описание изображения, отображаемое, если картинка не загрузилась;
  • url — путь к изображению;
  • "title" — необязательный атрибут, появляющийся как всплывающая подсказка при наведении курсора.

При рендеринге Marked преобразует этот синтаксис в HTML-тег <img>:

<img src="url" alt="alt-текст" title="title">

Кастомизация рендеринга изображений

Marked предоставляет объект Renderer, который позволяет переопределять стандартное поведение для различных элементов Markdown, включая изображения. Для изменения стандартного рендеринга создается экземпляр Renderer и переопределяется метод image:

const marked = require('marked');

const renderer = new marked.Renderer();

renderer.image = function(href, title, text) {
    const titleAttr = title ? ` title="${title}"` : '';
    return `<img src="${href}" alt="${text}" class="custom-image"${titleAttr}>`;
};

marked.setOptions({ renderer });

const markdown = '![Пример](image.png "Подсказка")';
const html = marked(markdown);
console.log(html);

В этом примере изображения получают дополнительный CSS-класс custom-image, что позволяет управлять стилями через внешние таблицы стилей.

Обработка относительных и абсолютных путей

При работе с Markdown важно различать относительные и абсолютные пути к изображениям. Относительные пути обычно интерпретируются относительно местоположения Markdown-файла, тогда как абсолютные ссылки указывают полный путь, включая протокол (http:// или https://). В Marked нет встроенной логики для проверки существования файла по пути, поэтому обработка ошибок загрузки изображения выполняется через браузерные события onerror.

Безопасность при рендеринге изображений

Marked поддерживает настройку безопасного рендеринга через опцию sanitize. При включенной опции HTML-теги экранируются, что предотвращает внедрение опасного кода. Однако кастомные рендереры, особенно для изображений, могут обходить эту защиту, если вставляют HTML напрямую. Для безопасного добавления атрибутов рекомендуется использовать функции экранирования:

function escapeHtml(html) {
    return html.replace(/&/g, '&amp;')
               .replace(/</g, '&lt;')
               .replace(/>/g, '&gt;')
               .replace(/"/g, '&quot;')
               .replace(/'/g, '&#39;');
}

Дополнительные возможности

  1. Lazy loading: добавление атрибута loading="lazy" для отложенной загрузки изображений:
renderer.image = function(href, title, text) {
    const titleAttr = title ? ` title="${title}"` : '';
    return `<img src="${href}" alt="${text}" loading="lazy"${titleAttr}>`;
};
  1. Responsive изображения: вставка дополнительных атрибутов srcset и sizes для поддержки разных разрешений экрана:
renderer.image = function(href, title, text) {
    const srcset = `${href} 1x, ${href.replace('.png', '@2x.png')} 2x`;
    return `<img src="${href}" alt="${text}" srcset="${srcset}">`;
};
  1. Обертка изображений в ссылки: часто изображения используют как кликабельные элементы. Это реализуется через генерацию тега <a> вокруг <img>:
renderer.image = function(href, title, text) {
    const titleAttr = title ? ` title="${title}"` : '';
    return `<a href="${href}"><img src="${href}" alt="${text}"${titleAttr}></a>`;
};

Использование с асинхронной подгрузкой данных

В случае динамических данных можно сначала подготовить Markdown с маркерами изображений, а затем перед рендерингом заменить их на актуальные URL. Marked поддерживает обработку готового Markdown через функцию marked.parse, что позволяет интегрировать динамический контент без изменения основной логики рендерера.

Заключение по рендерингу изображений

Рендеринг изображений в Marked строится на базовом синтаксисе Markdown, расширяемом через кастомные рендереры. Настройка HTML-атрибутов, добавление классов, поддержка lazy loading, responsive-изображений и оберток в ссылки позволяет создавать гибкие и безопасные решения для отображения графического контента в веб-приложениях.

Оглавление