跳到主要内容
版本：Canary 🚧

📦 plugin-ideal-image

生成近乎理想的图像的 Docusaurus 插件（响应式、懒加载及低像素占位图）。

信息

默认情况下，插件在开发模式下不工作，从而允许你始终看到全尺寸的图像。 如果你想调试插件的行为，你可以把 disableInDev 选项设置为 false。

安装流程​

npm install --save @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')} />
注意

This plugin registers a Webpack loader that changes the type of imported/require images:

  • Before: string
  • After: {preSrc: string, src: import("@theme/IdealImage").SrcImage}

配置​

接受的字段：

选项类型默认值描述
namestringideal-img/[name].[hash:hex:7].[width].[ext]输出文件的文件名模板。
sizesnumber[]原始尺寸指定你想使用的所有宽度。 如果指定尺寸超过了原始图像宽度，则使用后者（即图像不会被放大）。
sizenumber原始尺寸指定你想使用的唯一宽度。如果指定尺寸超过了原始图像宽度，则使用后者（即图像不会被放大）。
minnumber除了手动指定 sizes 外，你还可以指定 min、max 及 steps，然后自动生成相应尺寸。
maxnumber参见上方的 min。
stepsnumber4配置在 min 与 max 之间生成的图像数量（包括上下限）。
qualitynumber85JPEG 压缩质量。
disableInDevbooleantrue设置为 false 后，你可以在开发模式下测试插件行为。 提示：可以在浏览器中用网络节流来模拟慢速网络。

示例配置​

这是一个示例配置：

docusaurus.config.js
export default {
  plugins: [
    [
      '@docusaurus/plugin-ideal-image',
      {
        quality: 70,
        max: 1030, // max resized image's size.
        min: 640, // 最小缩放图片尺寸。 如果原始值比这还低，会使用原图尺寸。
        steps: 2, // 在 min 和 max 之间最多生成的图片数量（包含两端点）
        disableInDev: false,
      },
    ],
  ],
};