<NuxtImg>

原始檔
Nuxt 提供了 <NuxtImg> 元件來處理自動圖片最佳化。

<NuxtImg> 是原生 <img> 標籤的直接替代品。

  • 使用內建的提供程式來最佳化本地和遠端圖片
  • 將 src 轉換為提供程式最佳化的 URL
  • 根據 width 和 height 自動調整圖片大小
  • 當提供 sizes 選項時，生成響應式尺寸
  • 支援原生懶載入以及其他 <img> 屬性

設定

為了使用 <NuxtImg>，您應該安裝並啟用 Nuxt Image 模組

終端
npx nuxt module add image

使用

<NuxtImg> 直接輸出一個原生的 img 標籤（沒有任何包裝器）。像使用 <img> 標籤一樣使用它

<NuxtImg src="/nuxt-icon.png" />

結果將是

<img src="/nuxt-icon.png" />
閱讀更多關於 <NuxtImg> 元件的資訊。