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...

[stephanbogner]

@ChauhanT Thanks for sharing your solution with us :heart:

In case it helps someone (e.g. @eur2): I wrote here I got it to work

[ChauhanT]

Hi guys, sorry for the late response. After writing several such small plugins I noticed I was having a lot of other issues with astro. Due to time-restrictions, sadly, I decided to go back to gatsby. I am hoping to come back to astro in about a year when hopefully the ecosystem will be on-par with other frameworks.

[eur2]

@ChauhanT Take a look at https://github.com/divriots/jampack It's working well with astro!

[ChauhanT]

@eur2 Thanks for the link. It looks great! I'll try it the next time I move back to astro.