AI マジック 3Docsズーム可能な画像
ドキュメント内で画像のズームインを許可する
使用状況
MDX コンポーネントの img を ImageZoom に置き換えます。
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultMdxComponents from 'fumadocs-ui/mdx';
return (
<MdxContent
components={{
...defaultMdxComponents,
img: (props) => <ImageZoom {...(props as any)} />,
// other Mdx components
}}
/>
);これで、すべての画像に対して画像ズームが自動的に有効になります。
画像の最適化
指定しない場合、デフォルトの sizes プロパティ が Next.js <Image /> コンポーネントに定義されます。