# recma-import-images

> recma plugin to import image sources

Latest version **0.0.3** (published 2023-04-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install recma-import-images
pnpm add recma-import-images
yarn add recma-import-images
bun add recma-import-images
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-04-26 |
| First published | 2023-04-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Brad Cornes |
| Maintainers | bradlc |
| Keywords | mdx, recma |

## Links

- npm: https://www.npmjs.com/package/recma-import-images
- npm.io page: https://npm.io/package/recma-import-images

## Dependencies (2)

- [estree-util-visit](https://npm.io/package/estree-util-visit.md) ^1.2.1
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) ^2.2.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.3 (latest) — 2023-04-26
- 0.0.2 — 2023-04-06
- 0.0.1 — 2023-04-06

## README

# recma-import-images

> recma plugin to import image sources

## Installation

```
npm install recma-import-images
```

```js
import { compile } from '@mdx-js/mdx'
import { recmaImportImages } from 'recma-import-images'

let mdx = `![](./image.jpg)`

await compile(mdx, {
  recmaPlugins: [recmaImportImages],
})
```

## Example

```diff
  /*@jsxRuntime automatic @jsxImportSource react*/
+ import image_jpg$recmaImportImages from "./image.jpg";
  import {jsx as _jsx} from "react/jsx-runtime";
  function _createMdxContent(props) {
    const _components = Object.assign({
      p: "p",
      img: "img"
    }, props.components);
    return _jsx(_components.p, {
      children: _jsx(_components.img, {
-       src: "./image.jpg",
+       src: image_jpg$recmaImportImages,
        alt: ""
      })
    });
  }
  function MDXContent(props = {}) {
    const {wrapper: MDXLayout} = props.components || ({});
    return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
      children: _jsx(_createMdxContent, props)
    })) : _createMdxContent(props);
  }
```

---
_Source: https://npm.io/package/recma-import-images · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._