Enhanced Images Plugin for MDsveX

This plugin converts Markdown images to <enhanced:img> components.

Features

• Automatically imports images used in Markdown
• Converts Markdown image syntax to <enhanced:img>
• Skips HTTP/HTTPS URLs to avoid processing errors with external images
• Handles path resolution for various import scenarios
• Preserves title attributes from Markdown images

Usage

1npm install mdsvex mdsvex-enhanced-images @sveltejs/enhanced-img

1// svelte.config.js
2import { enhancedImages } from 'mdsvex-enhanced-images'
3
4export default {
5  preprocess: [
6    mdsvex({
7      remarkPlugins: [enhancedImages]
8    })
9  ]
10}

1// vite.config.js
2import { enhancedImages } from '@sveltejs/enhanced-img'
3import { sveltekit } from '@sveltejs/kit/vite'
4import { defineConfig } from 'vite'
5
6export default defineConfig({
7  plugins: [enhancedImages(), sveltekit()]
8})

Now use normal Markdown-style images just as you normally would. By default, paths beginning with $, @, ./, or ../ are left unchanged while all other paths are converted to relative paths by prepending ./.

1![Example](example.png) // Resolves to ./example.png
2![Example](../example.png) // Resolves to ../example.png
3![Example]($images/example.png) // Resolves to $images/example.png
4![Example](@images/example.png) // Resolves to @images/example.png
5
6// Title attributes are preserved
7![Example with tooltip](example.png "This text appears on hover")
8
9// External URLs remain as standard <img> tags
10![External image](https://example.com/image.jpg)

Advanced Usage: Custom Path Resolution

If the default path resolution strategy doesn't work for your needs, you can optionally provide a custom resolve function:

1mdsvex({
2  remarkPlugins: [
3    [
4      enhancedImages,
5      {
6        resolve: (path) => path
7      }
8    ]
9  ]
10})

Example: Make non-relative paths resolve to src/assets/images

If you just want to change the resolution of non-relative paths (most common case), you can use defaultResolverFactory to create a custom resolver. The factory's stock resolver will handle paths starting with $, @, or ./ or ../ unchanged, and call your custom relative resolver for all other paths.

1// svelte.config.js
2import { defaultResolverFactory } from 'mdsvex-enhanced-images'
3import { join } from 'path'
4
5const config = {
6  preprocess: [
7    mdsvex({
8      remarkPlugins: [
9        [
10          enhancedImages,
11          {
12            resolve: defaultResolverFactory((path) =>
13              join('src', 'assets', 'images', path)
14            )
15          }
16        ]
17      ]
18    })
19  ]
20}

Now, images with non-relative paths in Markdown will resolve to src/assets/images:

1![Example](example.png) // Resolves to src/assets/images/example.png (new)
2![Example](../example.png) // Resolves to ../example.png (unchanged)
3![Example]($images/example.png) // Resolves to $images/example.png (unchanged)
4![Example](@images/example.png) // Resolves to @images/example.png (unchanged)

License

MIT