Awesome
remark-mdx-images
A remark plugin for changing image sources to JavaScript imports using MDX
[!WARNING]
This package is deprecated in favor of
rehype-mdx-import-media
Table of Contents
Installation
npm install remark-mdx-images
Usage
This remark plugin takes markdown images, and converts them into mdx elements <img />
that use
JavaScript imports to resolve the image source.
For example, given a file named example.mdx
with the following contents:
![Very cute kittens](./kittens.png 'Meow!')
The following script:
import { readFile } from 'node:fs/promises'
import { compile } from '@mdx-js/mdx'
import remarkMdxImages from 'remark-mdx-images'
const { contents } = await compile(await readFile('example.mdx'), {
jsx: true,
remarkPlugins: [remarkMdxImages]
})
console.log(contents)
Roughly yields:
import kittens from './kittens.png'
export default function MDXContent() {
return (
<p>
<img alt="Very cute kittens" src={kittens} title="Meow!" />
</p>
)
}
API
Options
resolve
By default imports are resolved relative to the markdown file. This matches default markdown
behaviour. If this is set to false, this behaviour is removed and URLs are no longer processed. This
allows to import images from node_modules
. If this is disabled, local images can still be imported
by prepending the path with ./
.
Compatibility
This project is compatible with Node.js 18 or greater.