@ampernic/vitepress-plugin-html-image

markdown-it плагин для нормализации относительных путей src в raw HTML <img> тегах в VitePress.

Проблема

VitePress обрабатывает изображения в Markdown-синтаксисе (![](./img/foo.png)) и подхватывает их в asset pipeline. Но raw HTML внутри Markdown (<img src="img/foo.png">) остаётся нетронутым — Vite не видит такие пути как ассеты и они ломаются в production.

Типичный источник проблемы — документы, сконвертированные из DocBook: они содержат таблицы с <img> внутри HTML-блоков.

Решение

Плагин обходит все html_block и html_inline токены markdown-it и для каждого <img src="...">:

• Если путь относительный (img/foo.png) — добавляет ./ префикс
• Добавляет data-vite-ignore, чтобы Vite подхватил ассет через свою стандартную обработку
• Пропускает <img> внутри <pre> блоков

Установка

npm install @ampernic/vitepress-plugin-html-image

Использование

// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { htmlImagePlugin } from '@ampernic/vitepress-plugin-html-image'

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(htmlImagePlugin)
    },
  },
})

Обрабатываемые случаи

| Входной src | Результат | |-------------|-----------| | img/foo.png | ./img/foo.png + data-vite-ignore | | ./img/foo.png | ./img/foo.png + data-vite-ignore | | ../assets/bar.svg | ../assets/bar.svg + data-vite-ignore | | /absolute/path.png | без изменений | | https://example.com/img.png | без изменений | | data:image/... | без изменений |

Лицензия

GPL-3.0-or-later