Forum Libre

La semaine dernière, je demandais comment avoir des images optimisées dans du MDX avec Astro sans avoir à importer directement les images dans le MDX.

Au final ma solution a été :

1. De créer un composant Image custom qui importe dynamiquement les images (avec une pincée de ComponentProps pour que ça marche en TypeScript)

***
import { Image } from "astro:assets";
import type { ComponentProps } from "astro/types";

type Props = Omit<ComponentProps<typeof Image>, "src"> & {
  src: string;
};
const { src, ...props } = Astro.props;

const images = import.meta.glob<{ default: ImageMetadata }>("/src/assets/img/**/*.{jpeg,jpg,png,gif,svg}");
***

{/* @ts-expect-error */}
<Image src={images[src]()} {...props} />

2. De remplacer l'élément img par mon composant custom quand je rends le contenu

***
import { getEntry, render } from "astro:content";
import CustomImage from "@components/CustomImage.astro";

const { slug } = Astro.params;
const entry = await getEntry("blog", slug);

const { Content } = await render(entry);
***

<Content
    components={{
        img: CustomImage,
    }}
/>

Par contre, ça ne marche évidemment que dans les Content Collections, pour les fichiers MDX directement dans src/pages, il faudra importer les images directement, mais c'est déjà moins gênant.