2024-12-15 value.default 為什麼是檔案路徑

發表於 閱讀次數：
2024-12-15 value.default 為什麼是檔案路徑

2024-12-15 value.default 為什麼是檔案路徑

value.default 為什麼是檔案路徑?

value.default 是檔案路徑，這是因為 Vite 的 import.meta.glob 特性會將匹配到的靜態資源檔案進行處理，返回一個包含檔案相關資訊的物件。以下是詳細說明：

1. import.meta.glob 如何工作？

  • import.meta.glob 是 Vite 提供的一個方法，用於動態引入一組檔案。
  • 它會返回一個物件，其中：
    • Key 是檔案的相對路徑（以你的程式碼為例，像 ./SplitBill_images/Electricity.png）。
    • Value 是一個模組的物件，當設定 { eager: true } 時，它會直接載入檔案，並將該檔案的內容作為值。

2. value.default 的來源

當使用 { eager: true } 時，Vite 會預先處理每個檔案並返回類似的模組物件。例如：

1
2
3
4
5
6
7
8
{
  './SplitBill_images/Electricity.png': {
    default: '/assets/Electricity.abc123.png' // 處理後的靜態資源路徑
  },
  './SplitBill_images/gas.png': {
    default: '/assets/gas.def456.png'
  }
}

value.default 其實就是該檔案經過 Vite 編譯後的靜態資源 URL，它指向檔案在最終打包後的位置。

3. 為什麼 default 是檔案路徑？

  • Vite 內部會處理靜態資源檔案（如 .png、.jpg），並根據配置（如 assetsDir）將它們移到 assets 目錄。
  • 然後，Vite 會為每個檔案生成唯一的 URL，並將它映射到模組的 default 屬性。

4. 使用範例

假設檔案結構如下：

1
2
/src/SplitBill_images/Electricity.png
/src/SplitBill_images/gas.png

當你執行以下程式碼：

1
2
const allImages = import.meta.glob('./SplitBill_images/*.png', { eager: true });
console.log(allImages);

輸出會是：

1
2
3
4
{
  './SplitBill_images/Electricity.png': { default: '/assets/Electricity.abc123.png' },
  './SplitBill_images/gas.png': { default: '/assets/gas.def456.png' }
}

5. value.default 的用途

  • value.default 是檔案在網頁中的實際路徑，可以直接用作 <img> 的 src 屬性。
  • 當你要動態加載圖片時，它是非常方便的。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const images = {};
for (const [key, value] of Object.entries(allImages)) {
  const fileName = key.replace('./SplitBill_images/', '').replace('.png', '');
  images[fileName] = value.default;
}

console.log(images);
// 結果：
/*
{
  Electricity: '/assets/Electricity.abc123.png',
  gas: '/assets/gas.def456.png'
}
*/

結論

value.default 是檔案的實際 URL，因為 Vite 在處理 import.meta.glob 時會自動為每個靜態檔案生成一個唯一的 URL，並將它存放在模組的 default 屬性中，方便你直接使用。