📦 plugin-ideal-image

Docusaurus 插件，用于生成近乎理想的图像（响应式、懒加载和低质量占位符）。

信息

默认情况下，该插件在开发环境中 处于非活动状态 ，因此您可以始终查看全尺寸图像。如果您想调试理想图像的行为，可以将 disableInDev 选项设置为 false。

安装

npm

npm install --save @docusaurus/plugin-ideal-image

Yarn

yarn add @docusaurus/plugin-ideal-image

pnpm

pnpm add @docusaurus/plugin-ideal-image

使用

此插件仅支持 PNG 和 JPG 格式。

import Image from '@theme/IdealImage';
import thumbnail from './path/to/img.png';

// 您的 React 代码
<Image img={thumbnail} />

// 或者
<Image img={require('./path/to/img.png')} />

注意

此插件注册了一个 Webpack 加载器 ，它会更改导入/require 图像的类型：

• 之前：string
• 之后：{preSrc: string, src: import("@theme/IdealImage").SrcImage}

配置

可接受的字段：

选项	类型	默认值	描述
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	输出文件的命名模板。
sizes	number[]	原始大小	指定您想要使用的所有宽度。如果指定的尺寸超过原始图像的宽度，则使用后者（即图像不会放大）。
size	number	原始大小	指定您想要使用的宽度；如果指定的尺寸超过原始图像的宽度，则使用后者（即图像不会放大）。
min	number		作为手动指定 sizes 的替代方法，您可以指定 min、max 和 steps，系统将为您生成尺寸。
max	number		请参见上面的 min
steps	number	4	配置在 min 和 max 之间生成的图像数量（包括）。
quality	number	85	JPEG 压缩质量
disableInDev	boolean	true	通过将其设置为 false，您可以在开发模式下测试理想图像的行为。 提示 : 在浏览器中使用 网络限速 来模拟慢速网络。

示例配置

这是一个示例配置：

docusaurus.config.js

export default {
  plugins: [
    [
      '@docusaurus/plugin-ideal-image',
      {
        quality: 70,
        max: 1030, // 最大调整后图像大小。
        min: 640, // 最小调整后图像大小。如果原始图像尺寸更小，则使用原始尺寸。
        steps: 2, // 在 min 和 max 之间生成的图像最大数量（包括）。
        disableInDev: false,
      },
    ],
  ],
};