Fumadocs

可缩放图像

允许在文档中缩放图像

banner

Install to your codebase

Easier customisation & control.

使用方法

在您的 MDX 组件中,将 img 替换为 ImageZoom

mdx-components.tsx
import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
import defaultComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents): MDXComponents {
  return {
    ...defaultComponents,
    img: (props) => <ImageZoom {...(props as any)} />,
    ...components,
  };
}

现在,所有图像将自动启用图像缩放。

![Test](/banner.png)

图像优化

在 Next.js 中,如果未指定,默认会为 <Image /> 组件定义一个 sizes 属性

How is this guide?

Last updated on