📦 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 loader来改变 imported/require 的图像的类型:

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

配置

接受字段:

Option	类型	默认	描述
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	Filename template for output files.
sizes	number[]	original size	Specify 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).
size	number	original size	Specify 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)
min	number		As an alternative to manually specifying sizes, you can specify min, max and steps, and the sizes will be generated for you.
max	number		See min above
steps	number	4	Configure the number of images generated between min and max (inclusive)
quality	number	85	JPEG compression quality
disableInDev	boolean	true	You 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

module.exports = {
  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,
      },
    ],
  ],
};