Skip to main content
Version: Canary 🚧

📦 插件-理想图像

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

info

默认情况下，插件在开发环境中是不活动的，因此您可以随时查看全尺寸图像。如果您想调试理想的图像行为，可以将disableInDev选项设置为false。

安装​

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

此插件注册了一个Webpack加载器，用于更改导入/需要的图像类型：

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

配置​

接受的字段：

OptionTypeDefaultDescription
namestringideal-img/[name].[hash:hex:7].[width].[ext]Filename template for output files.
sizesnumber[]original sizeSpecify all widths you want to use. If a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up).
sizenumberoriginal sizeSpecify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up)
minnumberAs an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you.
maxnumberSee min above
stepsnumber4Configure the number of images generated between min and max (inclusive)
qualitynumber85JPEG compression quality
disableInDevbooleantrueYou can test ideal image behavior in dev mode by setting this to false. Tip: use network throttling in your browser to simulate slow networks.

示例配置​

这是一个配置示例：

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