Ir para o conteúdo principal
Version: 2.0.0-beta.9

📦 plugin-ideal-image

Plug-in do Docusaurus para gerar uma imagem ideal (responsivo, carregamento lento e espaço reservado de baixa qualidade) nas compilações de produção.

Instalação

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

Configuração

Modifique seu docusaurus.config.js

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

Utilização

Este plugin suporta apenas os formatos PNG e 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')} />

Opções

OpçãoTipoPadrãoDescrição
namestringideal-img/[name].[hash:hex:7].[width].[ext]Nome do template para arquivos de saída.
sizesarraytamanho originalEspecifique todas as larguras que deseja usar. Se um tamanho específico exceder a largura da imagem original, este último será usado (ou seja, as imagens não serão dimensionadas).
sizeintegertamanho originalEspecifique uma largura que deseja usar; se o tamanho especificado exceder a largura da imagem original, a última será usada (ou seja, as imagens não serão aumentadas)
minintegerComo alternativa à especificação manual de sizes, você pode especificar min, max e steps, e os tamanhos serão gerados para você.
maxintegerVer min acima
stepsinteger4Configure o número de imagens geradas entre min e max (inclusive)
qualityinteger85Qualidade de compressão JPEG