๐ฆ plugin-ideal-image
์์ฃผ ์ด์์ ์ธ ์ด๋ฏธ์ง(๋ฐ์ํ, ์ง์ฐ ๋ก๋ฉ, ์ ํ์ง ํ๋ ์ด์คํ๋)๋ฅผ ๋ง๋ค์ด์ฃผ๋ ๋ํ์ฌ์ฐ๋ฃจ์ค ํ๋ฌ๊ทธ์ธ์ ๋๋ค.
์ ๋ณด
By default, the plugin is inactive in development so you could always view full-scale images. If you want to debug the ideal image behavior, you could set the disableInDev
option to false
.
Installationโ
- npm
- Yarn
- pnpm
npm install --save @docusaurus/plugin-ideal-image
yarn add @docusaurus/plugin-ideal-image
pnpm add @docusaurus/plugin-ideal-image
Usageโ
ํด๋น ํ๋ฌ๊ทธ์ธ์ PNG, GIF, JPG ํฌ๋งท๋ง ์ง์ํฉ๋๋ค.
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')} />
๊ฒฝ๊ณ
This plugin registers a Webpack loader that changes the type of imported/require images:
- Before:
string
- After:
{preSrc: string, src: import("@theme/IdealImage").SrcImage}
Configurationโ
์ค์ ํ ์ ์๋ ํ๋
์ต์ | ํ์ | ๊ธฐ๋ณธ๊ฐ | ์ค๋ช |
---|---|---|---|
name | string | ideal-img/[name].[hash:hex:7].[width].[ext] | ๋ง๋ค์ด์ง ํ์ผ์ ์ํ ํ์ผ๋ช ํ ํ๋ฆฟ |
sizes | number[] | original size | ์ํ๋ ๋ชจ๋ ๋๋น๊ฐ์ ์ค์ ํฉ๋๋ค. ์ค์ ํ ํฌ๊ธฐ๊ฐ ์๋ณธ ์ด๋ฏธ์ง ๋๋น๋ณด๋ค ํฌ๋ค๋ฉด ๋ค์์ ์ค์ ํ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค(์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ๋ง๋ค์ง๋ ์์ต๋๋ค). |
size | number | original size | ์ํ๋ ๋๋น๊ฐ์ ์ค์ ํฉ๋๋ค. ์ค์ ํ ํฌ๊ธฐ๊ฐ ์๋ณธ ์ด๋ฏธ์ง ๋๋น๋ณด๋ค ํฌ๋ค๋ฉด ๋ค์์ ์ค์ ํ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค(์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ๋ง๋ค์ง๋ ์์ต๋๋ค). |
min | number | As an alternative to manually specifying sizes , you can specify min , max and steps , and the sizes will be generated for you. | |
max | number | See min above | |
steps | number | 4 | Configure the number of images generated between min and max (inclusive) |
quality | number | 85 | JPEG ์์ถ ์์ค์ ์ค์ ํฉ๋๋ค. |
disableInDev | boolean | true | You can test ideal image behavior in dev mode by setting this to false . Tip: use network throttling in your browser to simulate slow networks. |
Example configurationโ
๋ค์์ ์ค์ ์์์ ๋๋ค:
docusaurus.config.js
export default {
plugins: [
[
'@docusaurus/plugin-ideal-image',
{
quality: 70,
max: 1030, // max resized image's size.
min: 640, // min resized image's size. if original is lower, use that size.
steps: 2, // the max number of images generated between min and max (inclusive)
disableInDev: false,
},
],
],
};