📦 plugin-ideal-image

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

安装

npm

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

Yarn

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

选项

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