๐ฆ plugin-ideal-image
์์ฃผ ์ด์์ ์ธ ์ด๋ฏธ์ง(๋ฐ์ํ, ์ง์ฐ ๋ก๋ฉ, ์ ํ์ง ํ๋ ์ด์คํ๋)๋ฅผ ๋ง๋ค์ด์ฃผ๋ ๋ํ์ฌ์ฐ๋ฃจ์ค ํ๋ฌ๊ทธ์ธ์ ๋๋ค.
์ ๋ณด
๊ธฐ๋ณธ์ ์ผ๋ก ํด๋น ํ๋ฌ๊ทธ์ธ์ ๊ฐ๋ฐ์ค์๋ ๋นํ์ฑํ๋์ด ์์ผ๋ฏ๋ก ํญ์ ์ ์ฒด ํฌ๊ธฐ ์ด๋ฏธ์ง๋ฅผ ๋ณผ ์ ์์ต๋๋ค. ์ด์์ ์ธ ์ด๋ฏธ์ง ๋์์ ๋๋ฒ๊ทธํ๊ณ ์ถ๋ค๋ฉด disableInDev
์ต์
์ false
๋ก ์ค์ ํฉ๋๋ค.
์ค์นโ
- npm
- Yarn
- pnpm
npm install --save @docusaurus/plugin-ideal-image
yarn add @docusaurus/plugin-ideal-image
pnpm add @docusaurus/plugin-ideal-image
์ฌ์ฉ๋ฒโ
ํด๋น ํ๋ฌ๊ทธ์ธ์ PNG, GIF, JPG ํฌ๋งท๋ง ์ง์ํฉ๋๋ค.
import Image from '@theme/IdealImage';
import thumbnail from './path/to/img.png';
// ๋ฆฌ์กํธ ์ฝ๋
<Image img={thumbnail} />
// ๋๋ ์๋์ ๊ฐ์ ์ฝ๋
<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}
์ค์ โ
์ค์ ํ ์ ์๋ ํ๋
์ต์ | ํ์ | ๊ธฐ๋ณธ๊ฐ | ์ค๋ช |
---|---|---|---|
name | string | ideal-img/[name].[hash:hex:7].[width].[ext] | ๋ง๋ค์ด์ง ํ์ผ์ ์ํ ํ์ผ๋ช ํ ํ๋ฆฟ |
sizes | number[] | ์๋ณธ ํฌ๊ธฐ | ์ํ๋ ๋ชจ๋ ๋๋น๊ฐ์ ์ค์ ํฉ๋๋ค. ์ค์ ํ ํฌ๊ธฐ๊ฐ ์๋ณธ ์ด๋ฏธ์ง ๋๋น๋ณด๋ค ํฌ๋ค๋ฉด ๋ค์์ ์ค์ ํ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค(์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ๋ง๋ค์ง๋ ์์ต๋๋ค). |
size | number | ์๋ณธ ํฌ๊ธฐ | ์ํ๋ ๋๋น๊ฐ์ ์ค์ ํฉ๋๋ค. ์ค์ ํ ํฌ๊ธฐ๊ฐ ์๋ณธ ์ด๋ฏธ์ง ๋๋น๋ณด๋ค ํฌ๋ค๋ฉด ๋ค์์ ์ค์ ํ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค(์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ํฌ๊ฒ ๋ง๋ค์ง๋ ์์ต๋๋ค). |
min | number | ์ง์ sizes ๊ฐ์ ์ค์ ํ์ง ์๊ณ min , max , steps ๊ฐ๋ง ์ค์ ํด์ ์๋์ผ๋ก ํฌ๊ธฐ๊ฐ ์ ํด์ง๋๋ก ํฉ๋๋ค. | |
max | number | min ์ค๋ช
์ ์ฐธ๊ณ ํ์ธ์. | |
steps | number | 4 | min , max ๊ฐ์ (ํฌํจํ) ๊ฐ ์ฌ์ด์ ๋ง๋ค ์ด๋ฏธ์ง ์ซ์๋ฅผ ์ค์ ํฉ๋๋ค. |
quality | number | 85 | JPEG ์์ถ ์์ค์ ์ค์ ํฉ๋๋ค. |
disableInDev | boolean | true | false ๋ก ์ค์ ํ๋ฉด ๊ฐ๋ฐ ๋ชจ๋์์ ์ด์์ ์ธ ์ด๋ฏธ์ง ๋์์ ํ
์คํธํ ์ ์์ต๋๋ค. ํ: ๋ธ๋ผ์ฐ์ ์์ ๋์ญํญ ์ ํ ๊ธฐ๋ฅ์ ์ฌ์ฉํด ๋๋ฆฐ ๋คํธ์ํฌ๋ฅผ ์๋ฎฌ๋ ์ด์
ํ์ธ์. |
์ค์ ์์โ
๋ค์์ ์ค์ ์์์ ๋๋ค:
docusaurus.config.js
export default {
plugins: [
[
'@docusaurus/plugin-ideal-image',
{
quality: 70,
max: 1030, // max resized image's size.
min: 640, // ์กฐ์ ํ ์ด๋ฏธ์ง ์ต์ ํฌ๊ธฐ. ์๋ณธ์ด ๋ ์์ผ๋ฉด ํด๋น ํฌ๊ธฐ๋ฅผ ์ฌ์ฉํฉ๋๋ค.
steps: 2, // min, max ์ฌ์ด์์ ์์ฑ๋ ์ต๋ ์ด๋ฏธ์ง ๊ฐ์(์ค์ ๊ฐ ํฌํจ)
disableInDev: false,
},
],
],
};