Skip to main content
Version: 2.0.0-alpha.70

📦 plugin-ideal-image

Extension Docusaurus pour générer une image presque idéale (réactif, chargement paresseux, et placeur de mauvaise qualité) dans les versions de production.

note

You must create and serve a production build in order to view the high-quality images.

When using this plugin in development, only the low-quality image placeholders will be visible.

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, GIF 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 de tailles, vous pouvez spécifier min, max et étapes, et les tailles seront générées pour vous.
maxintegerVoir min ci-dessus
stepsinteger4Configurer le nombre d'images générées entre min et max (inclusif)
qualityinteger85Qualité de compression JPEG