📦 plugin-ideal-image

此 Docusaurus 插件用于为 生产环境构建版本 生成比较理想的图片(响应式、延迟加载和低质量的占位符)。

安装#

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

设置#

修改 docusaurus.config.js 配置文件为

module.exports = {
...
+ plugins: ['@docusaurus/plugin-ideal-image'],
...
}

用法#

该插件仅支持 PNG、GIF 和 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')} />

参数#

参数类型默认值描述
namestringideal-img/[name].[hash:hex:7].[width].[ext]输出文件的文件名模板。
sizesarrayoriginal size指定要使用的所有宽度值。如果指定的宽度超过原始图像的实际宽度,则将使用原始图片的宽度(即,图片不会被放大)
sizeintegeroriginal size指定你希望使用的一种宽度。如果指定的宽度值超过原始图像的实际宽度,则使用图片的原始宽度(即,图片不会被放大)
mininteger作为手动指定 sizes 参数的替代方法,你可以指定 minmaxsteps,然后会自动为你生成所有符合的尺寸。
maxinteger参见上面的 min 参数
stepsinteger4生成图像数量,数值介于 minmax (包含)之间。
qualityinteger85JPEG 图片的压缩质量