Astro Assets Seems To Bypass mdx Plugins / Ignores mdx Components

[eligundry]

What version of astro are you using?

2.7.4

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

Netlify / None

What package manager are you using?

npm

What operating system are you using?

Linux, Mac

What browser are you using?

Chrome

Describe the Bug

Before

When using @astrojs/image and mdx, I was able to override the img tag to do extra processing on the image (i.e. get the average color of the image and set it as the background color of the image). It would also allow the image to be processed by remark plugins, like remark-unwrap-images, which prevents extraneous <p> tags to wrap images.

Take the example blow:

📁 src/components/Post/MyCoolImage.astro

---
import { Image } from '@astrojs/image/components'
import { getRemoteImageMetadata } from '../../lib/images'

interface Props {
  alt: string
  src: string
}

const { alt, src } = Astro.props
const {
  aspectRatio,
  backgroundColor,
  width: fullWidth,
} = await getRemoteImageMetadata(src)
const width = Math.min(fullWidth, 690)
const height = Math.round(width / aspectRatio)
---

<Image
  src={src}
  alt={alt}
  width={width}
  height={height}
  aspectRatio={aspectRatio}
  format="webp"
  style={{ backgroundColor }}
  class:list={['max-w-100', 'mx-auto']}
/>
---

📁 src/components/Post/components.astro

import MyCoolImage from './MyCoolImage.astro'

export const components = {
  img: MyCoolImage
}

📁 src/content/blog/my-first-blog.mdx

---
title: Hello World!
---
export { components } from '../../components/Post/components.astro'

# Hello World!

![Image](../../assets/image.png)

The above code would combine such that the image in my-first-blog.mdx would have a nice background color when the image is not loaded AND the <img /> would be at the root level of the generate MDX HTML.

After

After setting up Astro Assets according to the guide and updating MyCoolImage.astro with the following changes:

---
-import { Image } from '@astrojs/image/components'
+import { Image } from 'astro:assets'
import { getRemoteImageMetadata } from '../../lib/images'

interface Props {
  alt: string
  src: string
}

const { alt, src } = Astro.props
const {
  aspectRatio,
  backgroundColor,
  width: fullWidth,
} = await getRemoteImageMetadata(src)
const width = Math.min(fullWidth, 690)
const height = Math.round(width / aspectRatio)
---

<Image
  src={src}
  alt={alt}
  width={width}
  height={height}
- aspectRatio={aspectRatio}
  format="webp"
  style={{ backgroundColor }}
  class:list={['max-w-100', 'mx-auto']}
/>
---

It seems that MyCoolImage.astro is no longer being called NOR is the image running through any of the remark plugins relevant to it.

What's the expected result?

In the below minimal replication app of the above issue, I would expect heading to http://localhost:3000/blog/markdown-style-guide/ to throw an error.

• Image in blog post
• <img /> override
• <PostImage /> component that just throws an error that is never thrown with the asset setup

Link to Minimal Reproducible Example

https://github.com/eligundry/astro-asset-bug

Participation

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

[eligundry]

Another big picture question: How are we supposed to control quality / size of mdx images in the asset system? I would love to not have to update all my calls to be aware of defaults around this and I'm not seeing a global default control for this a la Next/Gatsby?

[Princesseuh]

Closing as duplicate of #7223

[Princesseuh]

Another big picture question: How are we supposed to control quality / size of mdx images in the asset system? I would love to not have to update all my calls to be aware of defaults around this and I'm not seeing a global default control for this a la Next/Gatsby?

There's currently no way to do this, sorry for the inconvenience. We're still considering what is the best way to do this