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

📦 plugin-ideal-image

在生产模式构建中用于生成近乎理想的图像的 Docusaurus 插件(响应式、懒加载及模糊占位元素)。

安装

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

配置

修改您的 docusaurus.config.js

module.exports = {
...
plugins: ['@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')} />

选项

选项类型默认值描述
namestringideal-img/[name].[hash:hex:7].[width].[ext]输出文件的文件名模板。
sizesarray原始大小指定您想使用的所有宽度。 若指定大小超过原始图像宽度,则使用后者(即图像不会被缩放)。
sizeinteger原始大小指定您想使用的唯一宽度;若指定大小超过原始图像宽度,则使用后者(即图像不会被缩放)。
mininteger除了手动指定 sizes 外,您还可以指定 min、max 及 steps,我们将自动为您生成 sizes。
maxinteger参见上方的 min。
stepsinteger4配置所生成的图像数量,范围自 min 到 max(包括上下限)。
qualityinteger85JPEG 压缩质量。