⚠️ HIGHLY EXPERIMENTAL: Everything about this package is subject to change, including the name.
remark-astrojs-image
This is a remark preset that enhances images in your .mdx files to use @astrojs/image components. While this preset (and accompanying remark plugins) are not astro specific, if you're not using mdx in an astro site you probably shouldn't be here.
Functionality
| Feature | Before | After |
|---|---|---|
| Inline import conversion | <Image src="./image.jpg" /> |
<Image src={import("./image.jpg")} /> |
| img conversion | <img /> |
<Image /> |
| picture conversion | <picture /> |
<Picture /> |
| Markdown conversion | ![]("./image.png") |
<Image src={import("./image.jpg")} /> |
| Preserve attributes | <img width={500} height={500} alt="Alt Text"> |
<Image width={500} height={500} alt="Alt Text" /> |
![Alt Text]("./image.png") |
<Image alt="Alt Text" src={import("./image.jpg")} /> |
|
| Component auto import | import {Image} from "@astrojs/image/components"; |
Installation
NOTE: This plugin is mdx and esm only. Using components (such as the @astrojs/image component) from vanilla Markdown (.md files) has been deprecated in astro. This plugin, and astro's release candidate, require you to use mdx if you want to use components.
Install this remark preset:
# Using NPM
npm install @altano/remark-astrojs-image
# Using Yarn
yarn add @altano/remark-astrojs-imageEdit your astro.config.mjs to add this remark preset:
...
import remarkAstrojsImage from "@altano/remark-astrojs-image";
export default defineConfig({
integrations: [
// You should already have the @astrojs/image integration
image(),
// and the @astrojs/mdx integration
mdx({
remarkPlugins: {
// so just add this preset as a remark plugin:
extends: [remarkAstrojsImage],
},
}),
],
});