Aller au contenu principal
Version: 2.0.0-beta.9

📦 plugin-ideal-image

Plugin Docusaurus pour générer une image presque idéale (réactive, chargement paresseux et placeholder de mauvaise qualité) dans les constructions de production.

Installation

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

Configuration

Modifiez votre docusaurus.config.js

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

Utilisation

Ce plugin ne supporte que les formats PNG et JPG.

import Image from '@theme/IdealImage';
import thumbnail from './path/to/img.png';

// votre code React
<Image img={thumbnail} />

// ou
<Image img={require('./path/to/img.png')} />

Options

OptionTypePar défautDescription
namestringideal-img/[name].[hash:hex:7].[width].[ext]Modèle de nom de fichier pour les fichiers de sortie.
sizesarraytaille originaleSpécifiez toutes les largeurs que vous souhaitez utiliser. Si une taille spécifiée dépasse la largeur de l'image originale, celle-ci sera utilisée (c'est-à-dire que les images ne seront pas redimensionnées).
sizeintegertaille originaleSpécifiez une largeur que vous voulez utiliser. Si la taille spécifiée dépasse la largeur de l'image originale, celle-ci sera utilisée (c'est-à-dire que les images ne seront pas redimensionnées)
minintegerComme alternative à la spécification manuelle des sizes, vous pouvez spécifier min, max et steps, et les tailles seront générées pour vous.
maxintegerVoir min ci-dessus
stepsinteger4Configurez le nombre d'images générées entre min et max (inclusif)
qualityinteger85Qualité de compression JPEG