Remark Image

Usage

Add it to your Remark plugins.

import { remarkImage } from 'styledsea-docs-core/mdx-plugins';
 
export default {
  remarkPlugins: [remarkImage],
};

Supported:

Local Images
External URLs
Next.js static imports

How It Works

It transforms your ![image](./test.png) into Next.js Image usage, and add required props like width and height.

By default, it uses Next.js static imports to import local images, which supports the placeholder option of Next.js Image.

Next.js can handle image imports with its built-in image loader.

import MyImage from './public/image.png';
 
<img alt="image" src={MyImage} />

Otherwise, it obtains the image size from file-system or HTTP request.

<img alt="image" src="/image.png" widht="1980" height="1080" />

Options

Prop	Type	Default
`publicDir`	`string`	-
`placeholder`	`"none" \| "blur"`	`'blur'`
`useImport`	`boolean`	`true`
`external`	`boolean`	`true`

Example: With Imports

![Hello](/hello.png)
![Test](https://example.com/image.png)

Yields:

import HelloImage from './public/hello.png';
 
<img alt="Hello" src={HelloImage} />
<img
  alt="Test"
  src="https://example.com/image.png"
  width="1980"
  height="1080"
/>

Example: Without Imports

You can disable Next.js static imports on local images.

import { remarkImage } from 'styledsea-docs-core/mdx-plugins';
 
export default {
  remarkPlugins: [[remarkImage, { useImport: false }]],
};

![Hello](/hello.png)
![Test](https://example.com/image.png)