Docusaurus 实现图片放大功能

作者: ryan 发布于: 8/31/2024 更新于: 8/24/2025 字数: 0 字 阅读: 0 分钟

Docusaurus 本身并不自带图片放大的功能，但它是基于React框架的，可以通过插件或自定义组件来实现这样的功能。

由于 React 18 的兼容性问题，最简单的解决方案可能是使用 react-medium-image-zoom

1. 安装 react-medium-image-zoom

npm install react-medium-image-zoom
added 1 package in 4s

315 packages are looking for funding
run npm fund for details

2. 创建组件

在 src/components 目录中创建一个新的组件文件，比如 **ZoomImage.js**，来封装 **react-medium-image-zoom** 的功能：

import React from 'react';
import Zoom from 'react-medium-image-zoom';
import 'react-medium-image-zoom/dist/styles.css';

export default function ZoomImage({ src, alt, width }) {
  return (
    <Zoom>
      <img
        src={src}
        alt={alt}
        style={{ width: width || '100%', cursor: 'zoom-in' }}
      />
    </Zoom>
  );
}

2. 在 MDX 文件中使用

可以在需要展示带有放大功能图片的 MDX 文件中引入并使用这个组件：

import ZoomImage from '@site/src/components/ZoomImage';

我们也可以通过其他元数据来过滤日志数据，比如您可以单击任何日志条目以查看其他元数据，如容器名称，Kubernetes 节点，命名空间等。

<ZoomImage src="https://im.xinn.cc/c0e3cd6f8a95.png" alt="示例图片" width="600px" />

3. 启动 Docusaurus

保存更改并重新启动 Docusaurus 服务器，以查看效果：

npm start

这样，图片应该能够在点击时放大。