跳转至主内容
Version: 2.0.0-alpha.74

📦 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';
// 您的 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 压缩质量。