12/25/2025

astro image optimization compatibility, automatically detects remote or local storage

Sometimes you want to use images from the web. In that case, you can use this component globally. It automatically recognizes and optimizes them.

Although it is not a MarkDoc component, it is recommended to use it.

AstroImage.astro #

src\components\markdoc\AstroImage.astro

---
import type { ImageMetadata } from "astro";
import { Image } from "astro:assets";
interface Props {
  src: ImageMetadata | string;
  alt: string;
  className?: string;
  transitionName?: string;
}
const { src, alt, className, transitionName } = Astro.props;
---

{
  typeof src === "string" ? (
    <img
      src={src}
      alt={alt}
      class={className}
      title={alt}
      transition:name={transitionName}
    />
  ) : (
    <Image
      src={src}
      alt={alt}
      class={className}
      title={alt}
      transition:name={transitionName}
    />
  )
}