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/...	без изменений