This plugin converts Markdown images to <enhanced:img>
components.
<enhanced:img>
npm install mdsvex mdsvex-enhanced-images @sveltejs/enhanced-img
// svelte.config.js
import { enhancedImages } from 'mdsvex-enhanced-images'
export default {
preprocess: [
mdsvex({
remarkPlugins: [enhancedImages]
})
]
}
// vite.config.js
import { enhancedImages } from '@sveltejs/enhanced-img'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [enhancedImages(), sveltekit()]
})
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 ./
.
![Example](example.png) // Resolves to ./example.png
![Example](../example.png) // Resolves to ../example.png
![Example]($images/example.png) // Resolves to $images/example.png
![Example](@images/example.png) // Resolves to @images/example.png
If the default path resolution strategy doens't work for your needs, you can optionally provide a custom resolve
function:
mdsvex({
remarkPlugins: [
[
enhancedImages,
{
resolve: (path) => path
}
]
]
})
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.
// svelte.config.js
import { defaultResolverFactory } from 'mdsvex-enhanced-images'
import { join } from 'path'
const config = {
preprocess: [
mdsvex({
remarkPlugins: [
[
enhancedImages,
{
resolve: defaultResolverFactory((path) =>
join('src', 'assets', 'images', path)
)
}
]
]
})
]
}
Now, images with non-relative paths in Markdown will resolve to src/assets/images
:
![Example](example.png) // Resolves to src/assets/images/example.png (new)
![Example](../example.png) // Resolves to ../example.png (unchanged)
![Example]($images/example.png) // Resolves to $images/example.png (unchanged)
![Example](@images/example.png) // Resolves to @images/example.png (unchanged)
MIT