Skip to content
This repository has been archived by the owner on Mar 23, 2024. It is now read-only.

A remark plugin for changing image sources to JavaScript imports using MDX

License

Notifications You must be signed in to change notification settings

remcohaszing/remark-mdx-images

Repository files navigation

remark-mdx-images

github actions codecov npm version npm downloads

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.

License

MIT © Remco Haszing