📦 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';

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

// or
<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, // 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,
      },
    ],
  ],
};