Fix images being wrapped inside paragraphs in Astro MDX

Published: February 2, 2023

Problem: with Astro, when you place images inside MDX, they get wrapped inside a paragraph (<p>) for some reason. You probably don't want them to be inside paragraph, so here's a fix!

First, do npm i remark-unwrap-images to install a package made for this exact issue. Luckily this package does not affect your client side bundle, so it has no effect on performance.

Then, you have to update your astro.config.mjs file. Below your integrations, add remarkPlugins: [remarkUnwrapImages] to your markdown config. Like this:

export default defineConfig({
  site: 'https://vaihe.com',
  integrations: [
    mdx(),
  ],
  markdown: {
    remarkPlugins: [remarkUnwrapImages]
  }
});

Now, the images should no longer be inside paragraphs. Issue fixed!