📦 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

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, 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

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 de tailles, vous pouvez spécifier min, max et étapes, et les tailles seront générées pour vous.
max	integer		Voir min ci-dessus
steps	integer	4	Configurer le nombre d'images générées entre min et max (inclusif)
quality	integer	85	Qualité de compression JPEG