可缩放图像

允许放大文档中的图像

banner

用法

在 MDX 组件中将 img 替换为 ImageZoom。

app/docs/[[...slug]]/page.tsx

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
    }}
  />
);

现在，所有图像都会自动启用图像缩放。

![Test](/banner.png)

图像优化

如果未指定，将为 Next.js <Image /> 组件定义默认的 sizes 属性。

目录

可缩放图像 | 免费AI创意工作室| 3D、图像和视频生成器 | Magic3D