📦 plugin-ideal-image

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

信息

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

安装

npm
Yarn
pnpm
Bun

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

yarn add @docusaurus/plugin-ideal-image

pnpm add @docusaurus/plugin-ideal-image

bun 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}

对于 pnpm 用户

从 pnpm 10 开始，运行 pnpm install 默认不会运行依赖项安装脚本。您需要额外的 pnpm 配置（issue）以使我们的 sharp 图像调整大小依赖项正确安装，例如：

package.json
{
  "pnpm": {
    "onlyBuiltDependencies": ["fsevents"]
  }
}

配置

接受的字段：

选项	类型	默认值	描述
`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,
      },
    ],
  ],
};

安装​

使用​

配置​

示例配置​

安装

使用

配置

示例配置