Does not process images in `.md` files

[IanVS]

I'm working on an upgrade to astro 1.0.1, and find that my images in markdown files which were using normal markdown image syntax ([]()) are no longer being converted to <picture> elements.

[ChauhanT]

Hi, this is more of an astro issue. In the stable release, they want the user to dump the entire website in a single src directory - basically you can't separate out code and content any more. If you are not using a CMS, which many small website creators/maintainers don't, this is not good news.

I have a plugin that provides a solution here: https://gitlab.com/public-repositories/remark-astro-markdown-local-images .

I would rather this become core functionality though, rather than needing a plugin - as it shows an intention to prefer infrastructures for big websites over developers who run smaller websites.

[alvinometric]

Hey @ChauhanT any plans to put your plugin on Github and/or NPM? You can sync it to Gitlab with an action now.

I agree with you that this absolutely should be core functionality

[djmtype]

@ChauhanT does your plugin work with Astro 1.5.x? It didn't for me. My image within the same directory as my md file is not being transformed into srcset. It remains untouched. I installed your plugin: "remark-astro-markdown-local-images": "gitlab:public-repositories/remark-astro-markdown-local-images" astro.config.mjs: import { remarkAstroLocalImages } from 'remark-astro-markdown-local-images' Under export, added:

markdown: {
  remarkPlugins: [
   remarkAstroLocalImages()
  ]
}

[eur2]

@djmtype Did you succeed to make it working? How did you install it as it's not published with npm. I'm also looking for an Astro solution to optimize images included in markdown content.

[djmtype]

@eur2 Neither Imagetools nor Astro's own image integration seem to comb your md/x files for common markdown images and transform them as Imagetools once did. I couldn't get remarkAstroLocalImages() to work, so I gave up on this.

I ended up changing my .md to .mdx. Then, I wrote and imported my MediaImage.astro component into my .mdx file. The MediaImage.astro component imports Astro Imagetools to transform the image.

---
import { Img } from "astro-imagetools/components"

export interface Props {
	src: string
	alt: string
	width?: string
	height?: string
	caption?: string
}

const { src, alt, width, height, caption } = Astro.props as Props
---

<figure>
	<Img src={`/images/${src}`} alt={alt} width={width} height={height} format='webp' breakpoints={[480, 768, 900]} quality={60} />
	{
		(() => {
			if (caption !== undefined) return <figcaption set:html={caption} />
		})()
	}
</figure>

Then inside my .mdx file:

---
title: "About Xenon"
datePublished: 2022-07-07
---

import MediaImage from "../components/MediaImage.astro";

<MediaImage src="image.jpeg" alt="Some alt text" />

For me this workaround is fine, and only when developing locally. If there's a silver lining, I can have the image wrapped within a <figure> and add an optional caption without any hacky markdown solutions.

This isn't ideal for others.

1. For non-tech writers this is a deterrent because it requires them to know how to import and call the component onto their mdx page.
2. I imagine when using a markdown CMS like NetlifyCMS, there won't be an image preview since you'll be writing out the component instead of using the image picker.

[eur2]

Thanks you for these infos. On this image optimisation issue, Gatsby seems still Better...