📦 plugin-ideal-image

Docusaurus 外掛用於產生近乎完美的圖片（具備回應式、延遲載入和低品質佔位符）。

資訊

預設情況下，外掛在 開發期間處於非活動狀態，因此使用者永遠可以看到完整縮放的圖片。若需對理想圖片行為進行偵錯，可以使用將 disableInDev 選項設為 false。

安裝

npm

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

Yarn

yarn add @docusaurus/plugin-ideal-image

pnpm

pnpm add @docusaurus/plugin-ideal-image

用法

此外掛僅支援 PNG 和 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')} />

警告

此外掛程式註冊了一個 Webpack 載入器，用於變更匯入/要求的圖片類型

• 之前：字串
• 之後：{preSrc:字串, src: import("@theme/IdealImage").SrcImage}

組態

接受的欄位

選項	類型	預設值	說明
name	字串	ideal-img/[name].[hash:hex:7].[width].[ext]	輸出檔案的檔案名稱範本。
sizes	編號陣列	原始大小	指定要使用的所有寬度。如果指定的尺寸超過原始圖片的寬度，則會使用後者（即，圖片不會放大）。
size	數字	原始大小	指定要使用的其中一個寬度；如果指定的尺寸超過原始圖片的寬度，則會使用後者（即，圖片不會放大）
min	數字		作為手動指定sizes的替代方案，您可以指定min、max和steps，系統會為您產生尺寸。
max	數字		請參閱上方的min
steps	數字	4	設定在min和max（含）之間產生的圖片數量
quality	數字	85	JPEG 壓縮品質
disableInDev	布林值	true	您可以透過將此設定為false，在開發模式中測試理想圖片的行為。提示：在瀏覽器中使用 網路限制，模擬慢速網路。

範例組態

以下是範例組態

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,
      },
    ],
  ],
};