mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-29 08:57:03 +02:00
Co-authored-by: stnor <stefan@selessia.com> Co-authored-by: Joshua Chen <sidachen2003@gmail.com> Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com> Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Matija Sirk <matija.sirk@kopit.si> Co-authored-by: AHMET BAYHAN BAYRAMOGLU <49499275+ABB65@users.noreply.github.com> Co-authored-by: Stefan Norberg <stefan@norberg.org> Co-authored-by: Josh Goldberg <git@joshuakgoldberg.com> Co-authored-by: Muhammad Hammad <33136628+mhnaeem@users.noreply.github.com> Co-authored-by: Denis Al-Khelali <denis.al-khelali@itechart-group.com> Co-authored-by: Balthasar Hofer <lebalz@outlook.com> Co-authored-by: Danny Kim <0916dhkim@gmail.com> Co-authored-by: Frieder Bluemle <frieder.bluemle@gmail.com> Co-authored-by: John Reilly <johnny_reilly@hotmail.com> Co-authored-by: Robert Lawrence <62929526+r-lawrence@users.noreply.github.com> Co-authored-by: Sadegh Karimi <sadegh.krmi@gmail.com> Co-authored-by: Lachlan Heywood <lachieh@users.noreply.github.com> Co-authored-by: mturoci <64769322+mturoci@users.noreply.github.com> Co-authored-by: 宋锦丰 <36468758+SJFCS@users.noreply.github.com> Co-authored-by: Nguyễn Thành Nam <namnguyenthanh.work@gmail.com> Co-authored-by: Dongjoon Lee <djunnni@gmail.com> Co-authored-by: Thomas.CA <44041651+Thomascogez@users.noreply.github.com> Co-authored-by: Riccardo <riccardo.odone@gmail.com> Co-authored-by: Lane Goolsby <lanegoolsby@yahoo.com> Co-authored-by: Mariusz Krzaczkowski <m.krzaczkowski@yetiforce.com> Co-authored-by: Matija Sirk <sirkmatija@gmail.com> Co-authored-by: Jiří <zmrhal.j@gmail.com> |
||
---|---|---|
.. | ||
src | ||
.npmignore | ||
package.json | ||
README.md | ||
tsconfig.client.json | ||
tsconfig.json |
@docusaurus/plugin-ideal-image
Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder).
Installation
yarn add @docusaurus/plugin-ideal-image
Modify your docusaurus.config.js
module.exports = {
...
+ plugins: ['@docusaurus/plugin-ideal-image'],
...
}
Usage
Support png, gif and jpg only
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')} />
Options
Option | Type | Default | Description |
---|---|---|---|
name |
string |
ideal-img/[name].[hash:hex:7].[width].[ext] |
Filename template for output files. |
sizes |
array |
original size | Specify all widths you want to use; if a specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up). You may also declare a default sizes array in the loader options in your webpack.config.js . |
size |
integer |
original size | Specify one width you want to use; if the specified size exceeds the original image's width, the latter will be used (i.e. images won't be scaled up) |
min |
integer |
As an alternative to manually specifying sizes , you can specify min , max and steps , and the sizes will be generated for you. |
|
max |
integer |
See min above |
|
steps |
integer |
4 |
Configure the number of images generated between min and max (inclusive) |
quality |
integer |
85 |
JPEG compression quality |