plugin-ideal-image

优质

小牛编辑

130浏览

2023-12-01

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

安装

npm
Yarn

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

yarn add @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')} />

参数列表

参数	类型	默认值	描述
`name`	`string`	`ideal-img/[name].[hash:hex:7].[width].[ext]`	输出文件的文件名模板。
`sizes`	`array`	original size	指定要使用的所有宽度值。如果指定的宽度超过原始图像的实际宽度，则将使用原始图片的宽度（即，图片不会被放大）
`size`	`integer`	original size	指定你希望使用的一种宽度。如果指定的宽度值超过原始图像的实际宽度，则使用图片的原始宽度（即，图片不会被放大）
`min`	`integer`		作为手动指定 `sizes` 参数的替代方法，你可以指定 `min`、`max` 和 `steps`，然后会自动为你生成所有符合的尺寸。
`max`	`integer`		参见上面的 `min` 参数
`steps`	`integer`	`4`	生成图像数量，数值介于 `min` 和 `max` （包含）之间。
`quality`	`integer`	`85`	JPEG 图片的压缩质量