refactor: improve relative image path normalization (#5314)

__tests__/unit/node/markdown/plugins/image.test.ts

@@ -0,0 +1,33 @@
+import { MarkdownItAsync } from 'markdown-it-async'
+import { imagePlugin } from 'node/markdown/plugins/image'
+
+describe('node/markdown/plugins/image', () => {
+  const md = new MarkdownItAsync()
+  imagePlugin(md as any)
+
+  test('default image output', async () => {
+    const html = await md.renderAsync('![logo](foo.png)')
+    expect(html.trim()).toMatchInlineSnapshot(
+      `"<p><img src="./foo.png" alt="logo"></p>"`
+    )
+  })
+
+  test.for([
+    ['foo.png', './foo.png'],
+    ['./foo.png', './foo.png'],
+    ['../foo.png', '../foo.png'],
+    ['../../foo.png', '../../foo.png'],
+    ['/foo.png', '/foo.png'],
+    ['https://example.com/foo.png', 'https://example.com/foo.png']
+  ])('normalizes image src: %s → %s', async ([src, expected]) => {
+    const html = await md.renderAsync(`![logo](${src})`)
+    expect(html).toContain(`src="${expected}"`)
+  })
+
+  test('adds loading="lazy" attribute when lazyLoading is enabled', async () => {
+    const mdLazy = new MarkdownItAsync()
+    imagePlugin(mdLazy as any, { lazyLoading: true })
+    const html = await mdLazy.renderAsync('![logo](foo.png)')
+    expect(html).toContain('loading="lazy"')
+  })
+})

src/node/markdown/plugins/image.ts

@@ -20,7 +20,8 @@ export const imagePlugin = (
     const token = tokens[idx]
     let url = token.attrGet('src')
     if (url && !EXTERNAL_URL_RE.test(url)) {
-      if (!/^\.?\//.test(url)) url = './' + url
+      // Normalize relative "foo.png" to "./foo.png" and decode for processing by bundlers
+      if (!/^\.*?\//.test(url)) url = './' + url
       token.attrSet('src', decodeURIComponent(url))
     }
     if (lazyLoading) {