跳转至主内容
Version: 2.0.0-beta.20

📦 plugin-ideal-image

Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder).

信息

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.

安装

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

用法

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

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

// 您的 React 代码
<Image img={thumbnail} />

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

配置

Accepted fields:

OptionTypeDefaultDescription
namestringideal-img/[name].[hash:hex:7].[width].[ext]Filename template for output files.
sizesnumber[]original sizeSpecify all widths you want to use. 若指定大小超过原始图像宽度,则使用后者(即图像不会被缩放)。
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.

示例配置

Here's an example configuration:

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