📦 理想图片插件

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

Bun

bun add @docusaurus/plugin-ideal-image

用法

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

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

// your React code
<Image img={thumbnail} />

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

警告

此插件注册了一个 Webpack 加载器，它会改变导入/引用的图片类型

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

对于 pnpm 用户

从 pnpm 10 开始，默认情况下运行 pnpm install 不会执行依赖安装脚本。您需要额外的 pnpm 配置（问题），以便我们的 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, // max resized image's size.
        min: 640, // min resized image's size. if original is lower, use that size.
        steps: 2, // the max number of images generated between min and max (inclusive)
        disableInDev: false,
      },
    ],
  ],
};