📦 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

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

Yarn

yarn add @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

Option	Type	Par défaut	Description
name	string	ideal-img/[name].[hash:hex:7].[width].[ext]	Modèle de nom de fichier pour les fichiers de sortie.
sizes	array	taille originale	Spé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).
size	integer	taille originale	Spé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)
min	integer		Comme 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.
max	integer		Voir min ci-dessus
steps	integer	4	Configurez le nombre d'images générées entre min et max (inclusif)
quality	integer	85	Qualité de compression JPEG