跳到主要内容
版本:3.5.2

📦 plugin-ideal-image

生成近乎理想的图像的 Docusaurus 插件(响应式、懒加载及低像素占位图)。

信息

By default, the plugin is inactive in development so you could always view full-scale images. If you want to debug the ideal image behavior, you could set the disableInDev option to false.

Installation

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

Usage

此插件仅支持 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')} />
警告

This plugin registers a Webpack loader that changes the type of imported/require images:

  • Before: string
  • After: {preSrc: string, src: import("@theme/IdealImage").SrcImage}

Configuration

接受的字段:

选项类型默认值描述
namestringideal-img/[name].[hash:hex:7].[width].[ext]输出文件的文件名模板。
sizesnumber[]original size指定你想使用的所有宽度。 如果指定尺寸超过了原始图像宽度,则使用后者(即图像不会被放大)。
sizenumberoriginal size指定你想使用的唯一宽度。如果指定尺寸超过了原始图像宽度,则使用后者(即图像不会被放大)。
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 压缩质量。
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.

Example configuration

这是一个示例配置:

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