Universal MarkdownImage component

import { MarkdownImage } from '@app/mdx'

MarkdownImage is a responsive image component used for img elements inside MDX content. It measures its container and the source image, then computes dimensions that fit within the available width while preserving aspect ratio.

How it works

• Measures the wrapper width via onLayout
• Gets the source image dimensions via Image.getSize() (React Native)
• Computes width and height as min(originalWidth, wrapperWidth, windowWidth) while preserving aspect ratio
• Uses the universal Image from @app/ui with contentFit="contain"

This makes markdown images scale appropriately on both web and native without hardcoding sizes.

Props

Extends UniversalImageProps from @green-stack/components/Image.types:

Typically you don’t use MarkdownImage directly; MarkdownTheme passes it to MDXComponents as the img override.

• packages/@app-mdx
  • MarkdownImage.tsx

Direct usage (when needed)

import { MarkdownImage } from '@app/mdx'
 
<MarkdownImage
    src="https://example.com/image.png"
    alt="Example image"
/>