img MDX component override is not used in Astro collections

[LexSwed]

What version of astro are you using?

the issue comes from @astrojs/[email protected]+

Are you using an SSR adapter? If so, which one?

Vercel

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

When providing custom components for MDX file in content collections, ![alt](image.jpg) will always be replaced by astro:assets Image component, hence not allowing to style it or customise the behaviour (for example, rendering the caption). The regression seems to come in some of @astrojs/mdx updates, reverting to 0.18 helps to mitigate the issue.

export const components = {
  p: (props) => <p  {...props} class="custom-p" />
  img: (props) => <img {...props} class="custom-style" />
}

In .mdx:

---
title: New post
---

export { components } from '../components';

![alt for image](assets/image.jpg)

p will be correctly picked up from components, but img will be ignored and astro image used instead.
Ideally, ![alt](image) would be parsed as a local image, so props include src, alt, width, height, etc. So that they can be passed to astro:assets/Image

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/eager-pascal-b30gwz?file=%2Fsrc%2Fpages%2Findex.astro%3A14%2C1

Participation

• I am willing to submit a pull request for this issue.

[LexSwed]

Found a way to style it (jsx + Tailwind is only for example, can be Astro component with CSS)

export const components = {
  p: (props) => <p class="[&:has(>img:only-child)]:mb-10 [&:has(>img:only-child)]:mt-6 [&>img]:mx-auto [&>img]:rounded-lg [&>img]:shadow-md" />
}

Obviously, this is suboptimal, and still doesn't allow for customised rendering (like captions)

[joe-bell]

Unfortunately, I just ran into this trying to upgrade to [email protected]

---

For anyone stuck, here's a friendly reminder that you can still import components/images in the meantime:

---
title: "Example Post"
---

import MDXImage from "../../components/mdx/img.astro";
import exampleImage from "../../assets/images/blog/example-image.jpg";

Here's some text or whatever

<MDXImage alt="Description of image" src={exampleImage} />