html-validator
主要用于自動驗證nuxt服務器呈現的HTML(SSR和SSG)，以檢測可能導致水合錯誤的HTML常見問題，有助于減少水合錯誤，檢測常見的可訪問性錯誤。
安裝
npx nuxi@latest module add html-validator
配置
若自動更新nuxt.config.ts配置文件失敗，可手動添加下面代碼:
nuxt3
defineNuxtConfig({modules: ['@nuxtjs/html-validator',//其他配置項]})nuxt2.9+
export default {buildModules: ['@nuxtjs/html-validator']}
nuxt2
export default {// Install @nuxtjs/html-validator as dependency instead of devDependencymodules: ['@nuxtjs/html-validator']}
使用
html-validator有四個選項
1.usePrettier允許更美觀地打印源代碼，以便在上下文中顯示錯誤。?
如果使用的是TailwindCSS，請考慮不要啟用此功能，因為在開發模式下，prettier將難以處理解析HTML的大小。
2.logLevel設置詳細信息為verbose、warning或error。在dev中默認為verbose，在生成時為warning。?
您可以使用此配置選項來關閉控制臺日志記錄的No HTML validation errors found for…消息。
3.如果生成的頁面有任何驗證錯誤，failOnError將在運行nuxt generate后拋出一個錯誤。
?
在持續集成中很有用。
4.Options允許您傳入html-validate選項，這些選項將與默認配置合并?
更多關于配置 html- validate?的信息，可以參考 官方文檔。
默認配置
{htmlValidator: {usePrettier: false,logLevel: 'verbose',failOnError: false,/** A list of routes to ignore (that is, not check validity for). */ignore: [/\.(xml|rss|json)$/],options: {extends: ['html-validate:document','html-validate:recommended','html-validate:standard'],rules: {'svg-focusable': 'off','no-unknown-elements': 'error',// Conflicts or not needed as we use prettier formatting'void-style': 'off','no-trailing-whitespace': 'off',// Conflict with Nuxt defaults'require-sri': 'off','attribute-boolean-style': 'off','doctype-style': 'off',// Unreasonable rule'no-inline-style': 'off'}}}
}
規則參考
html語法和概念
與HTML語法和概念相關的規則。
| attr-delimiter | 禁止屬性鍵和值之間有空格 | |
| attr-spacing | 要求屬性之間用空格分隔 | |
| close-attr | 禁止結束標記具有屬性 | |
| close-order | 要求元素按正確順序關閉 | |
| element-name | 禁止使用無效的元素名稱 | |
| form-dup-name | 要求表單控件具有唯一的名稱 | |
| map-dup-name | 要求‘ <map name> ’是唯一的 | |
| map-id-name | 要求name和id在<map>元素上匹配 | |
| no-dup-attr | 禁止重復屬性 | |
| no-dup-class | 禁止重復的類 | |
| no-raw-characters | 禁止使用未轉義的特殊字符 | |
| no-redundant-for | 禁止對屬性使用冗余標簽 | |
| script-type | 要求‘ <script> ’元素的有效類型 | |
| unrecognized-char-ref | 禁止無法識別的字符引用 | |
| valid-autocomplete | 要求自動完成屬性有效 | |
| valid-id | 要求‘ id ’是一個有效的標識符 |
內容模型
| attribute-allowed-values | 驗證允許的屬性值 | |
| attribute-misuse | 要求屬性在正確的上下文中使用 | |
| element-permitted-content | 驗證允許的內容 | |
| element-permitted-occurrences | 驗證允許的元素出現次數 | |
| element-permitted-order | 驗證所需的元素順序 | |
| element-permitted-parent | 驗證允許的元素父元素 | |
| element-required-ancestor | 驗證所需的元素祖級 | |
| element-required-attributes | 確保設置了所需的屬性 | |
| element-required-content | 確保必需的元素存在 | |
| input-attributes | 驗證輸入屬性的使用 | |
| no-multiple-main | 禁用多個“<main>” | |
| script-element | 為‘ <script> ’要求結束標簽 | |
| void-content | 禁止包含內容的void元素 |
棄用規則?
?
與已棄用或過時功能的使用相關的規則。
| deprecated | 禁止使用廢棄的元素 | |
| deprecated-rule | 禁止使用不推薦的規則 | |
| no-conditional-comment | 禁止使用條件注釋 | |
| no-deprecated-attr | 禁止使用棄用的屬性 |
可行性
| area-alt | 要求‘ <area> ’元素上的替代文本 | |
| aria-hidden-body | 禁止在“<body>”上設置“aria-hidden” | |
| aria-label-misuse | 禁止誤用“aria-label” | |
| empty-heading | 要求標題頭有文字內容 | |
| empty-title | 要求標題有文字內容 | |
| hidden-focusable | 在可聚焦的元素上禁用“aria-hidden” | |
| input-missing-label | 要求輸入有標簽 | |
| meta-refresh | 要求元刷新具有0秒延遲 | |
| multiple-labeled-controls | 禁止與多個控件關聯的標簽 | |
| no-abstract-role | 禁止使用抽象的WAI-ARIA角色 | |
| no-autoplay | 禁止自動播放媒體元素 | |
| no-implicit-button-type | 禁止隱式按鈕類型 | |
| no-redundant-aria-label | 禁止arial -label和label具有相同的文本內容 | |
| no-redundant-role | 禁止使用冗余角色 | |
| prefer-native-element | 更傾向使用原生HTML元素而不是角色 | |
| svg-focusable | 要求<svg>具有可聚焦屬性 | |
| tel-non-breaking | 要求在電話號碼中使用不間斷字符 | |
| text-content | 要求元素具有有效的文本內容 | |
| unique-landmark | 要求地標有唯一的名稱 | |
| wcag/h30 | WCAG H30：提供鏈接文本 | |
| wcag/h32 | WCAG H32：提供提交按鈕 | |
| wcag/h36 | WCAG H36：要求在圖片上使用所有文本作為提交按鈕 | |
| wcag/h37 | WCAG H37：在img元素上使用alt屬性 | |
| wcag/h63 | WCAG H63：使用scope屬性來關聯標題單元格和數據單元格 | |
| wcag/h67 | WCAG H67：在img元素上使用空alt文本和沒有標題屬性 | |
| wcag/h71 | WCAG H71：為表單控件組提供描述 |
驗證
| require-csp-nonce | 需要CSP的資源 | |
| require-sri | 要求資源的SRI |
SEO
| long-title | 要求標題不要有太長的文字 |
模式
| attr-case | 要求屬性名使用特定的大小寫 | |
| attr-pattern | 要求屬性匹配已配置的模式 | |
| attr-quotes | Require attribute quoting | |
| attribute-boolean-style | 要求屬性引用 | |
| attribute-empty-style | 為空屬性要求特定的樣式 | |
| class-pattern | 要求類匹配特定的模式 | |
| doctype-style | 需要DOCTYPE的特定案例 | |
| element-case | 要求元素名稱使用特定的大小寫 | |
| id-pattern | 要求id匹配特定的模式 | |
| name-pattern | 要求表單控件名稱匹配特定的模式 | |
| no-implicit-close | 要求帶有可選結束標簽的元素顯式關閉 | |
| no-implicit-input-type | 禁止隱式輸入類型 | |
| no-inline-style | 禁止內聯樣式 | |
| no-self-closing | 禁止自閉元素 | |
| no-style-tag | 禁止使用<style>標記 | |
| no-trailing-whitespace | 禁止尾隨空格 | |
| prefer-button | 對于按鈕，更喜歡使用<button>而不是<input> | |
| prefer-tbody | 更喜歡把<tr>包裝在<tbody>里面 | |
| void-style | 需要一個特定的樣式來關閉void元素 |
文檔
這些規則適用于完整的單據。
| allowed-links | 禁用鏈接類型 | |
| doctype-html | 要求使用“html”文檔類型 | |
| heading-level | 要求標題從h1開始并遞增1 | |
| missing-doctype | 要求文檔具有doctype | |
| no-dup-id | 不允許重復的id | |
| no-missing-references | 要求所有元素引用都存在 | |
| no-utf8-bom | 禁止文檔具有UTF-8 BOM |
未知元素
| no-unknown-elements | 禁止使用未知元素 | |
| no-unused-disable | 禁用未使用的禁用指令 |
預設配置
HTML-validate帶有一些預定義的預設。
示例?.htmlvalidate.json
{"extends": ["html-validate:PRESET"]
}示例?.htmlvalidate.cjs
const { defineConfig } = require("html-validate");module.exports = defineConfig({extends: ["html-validate:PRESET"],
});示例?.htmlvalidate.mjs
import { defineConfig } from "html-validate";export default defineConfig({extends: ["html-validate:PRESET"],
});可以設置多個預設，并將按照它們出現在“extends”中的順序啟用。
預設類型
html-validate:recommended
這是默認的預設，支持大多數規則，包括標準驗證、WCAG和最佳實踐。它是其他預設的超集。
html-validate:standard
啟用與根據WHATWG HTML標準（生活標準）進行驗證相關的規則。
如果您想要類似于Nu Html檢查器和類似工具的驗證，請使用此預設。
html-validate:prettier
自:v7.18.0?
如果您正在使用Prettier來格式化HTML標記，則可以使用此預設來禁用諸如void-style之類的矛盾規則。?
?
這個預設應該與另一個預設（如html-validate:）結合使用，因為它只禁用規則。
html-validate:a11y
啟用與可訪問性相關的規則。大多數規則（但不是所有已啟用的規則）都與WCAG遵從性有關。它本身不會驗證文檔/模板本身是否有效，而只會在發現可訪問性問題時進行驗證。?
?
這個預設應該與html-validate:standard一起使用，以確保文檔結構是有效的（WCAG的要求），如果可能的話，還應該與html-validate:document（確保引用是有效的，等等）一起使用。
html-validate:browser
自:8.24.0?
如果要從瀏覽器中獲取源代碼，請使用此預設來禁用受瀏覽器規范化影響的規則，例如屬性布爾樣式。這些規則大多只是表面上的。?
?
這個預設應該與另一個預設（如html-validate:）結合使用，因為它只禁用規則。
html-validate:document
啟用需要驗證完整文檔的規則，即不需要驗證部分模板。示例包括缺少文檔類型和無效引用。?
?
將此預設與其他預設一起使用以實現全覆蓋。這個預設是由cypress-html-validate和protractor-html-validate等插件啟用的。
2.@nuxtjs/i18n
安裝
npx nuxi@latest module add i18n
配置
{modules: ['@nuxtjs/i18n',],i18n: {locales: [{ code: 'en', language: 'en-US' },{ code: 'fr', language: 'fr-FR' }],defaultLocale: 'en',}
}
實戰示例
import process from 'node:process'const isDev = process.env.NODE_ENV === 'development'// const apiBaseUrl = 'http://localhost:3001'
const apiBaseUrl = 'https://movies-proxy.vercel.app'export default defineNuxtConfig({modules: ['@vueuse/nuxt','@unocss/nuxt','@nuxt/image','@nuxtjs/i18n','@nuxtjs/html-validator',],experimental: {inlineSSRStyles: false,viewTransition: true,renderJsonPayloads: true,},routeRules: {'/**': isDev ? {} : { cache: { swr: true, maxAge: 120, staleMaxAge: 60, headersOnly: true } },},runtimeConfig: {public: {apiBaseUrl,},},devtools: {enabled: true,},image: {provider: 'proxy',providers: {proxy: {provider: 'ipx',options: {baseURL: `${apiBaseUrl}/ipx`,},},},},nitro: {routeRules: {'/**': { isr: false },},},i18n: {detectBrowserLanguage: {useCookie: true,fallbackLocale: 'en',},strategy: 'no_prefix',locales: [{code: 'en',name: 'English',file: 'en.json',},{code: 'fa-IR',name: '?????',file: 'fa-IR.json',},{code: 'de-DE',name: 'Deutsch',file: 'de-DE.json',},{code: 'es-ES',name: 'Espa?ol',file: 'es-ES.json',},{code: 'it',name: 'Italiano',file: 'it.json',},{code: 'ja',name: '日本語',file: 'ja.json',},{code: 'zh-CN',name: '簡體中文',file: 'zh-CN.json',},{code: 'pt-PT',name: 'Português',file: 'pt-PT.json',},{code: 'pt-BR',name: 'Português do Brasil',file: 'pt-BR.json',},{code: 'ru-RU',name: 'Русский',file: 'ru-RU.json',},{code: 'fr-FR',name: 'Fran?ais',file: 'fr-FR.json',},{code: 'uk-UA',name: 'Укра?нська',file: 'uk-UA.json',},{code: 'vi',name: 'Ti?ng Vi?t',file: 'vi.json',},],lazy: true,langDir: 'internationalization',defaultLocale: 'en',},htmlValidator: {usePrettier: false,logLevel: 'verbose',failOnError: false,/** A list of routes to ignore (that is, not check validity for). */ignore: [/\.(xml|rss|json)$/],options: {extends: ['html-validate:document','html-validate:recommended','html-validate:standard'],rules: {'svg-focusable': 'off','no-unknown-elements': 'error',// Conflicts or not needed as we use prettier formatting'void-style': 'off','no-trailing-whitespace': 'off',// Conflict with Nuxt defaults'require-sri': 'off','attribute-boolean-style': 'off','doctype-style': 'off',// Unreasonable rule'no-inline-style': 'off'}}},
})
3.@nuxt/image
為nuxt優化的圖像，具有漸進式處理，延遲加載，支持圖像CDN，實時調整大小和提供者支持。
安裝
npx nuxi@latest module add image
nuxt2 可參考 v0文檔
其他相關命令
啟用corepack enable
corepack enable安裝依賴項
pnpm install生成類型存根
pnpm dev:prepare開發模式
pnpm dev測試添加到test/目錄中
pnpm test檢查代碼風格
pnpm lint在創建PR之前
pnpm build確保構建并沒有報錯
開發模式啟動文檔
pnpm docs:dev打開http://localhost:3000在瀏覽器中查看。
更新docs/content/目錄下的文檔內容。
配置
在nuxt.config.ts添加模塊支持
export default defineNuxtConfig({modules: ['@nuxt/image',]
})
邊緣通道更新
在package.json 添加如下
刪除lockfile ?(package-lock.json,?yarn.lock, or?pnpm-lock.yaml)?并重新安裝依賴項。
退出邊緣通道
刪除lockfile ?(package-lock.json,?yarn.lock, or?pnpm-lock.yaml)?并重新安裝依賴項。
升級最新版本
pnpm up @nuxt/image
重新創建鎖文件
npx nuxt@latest upgrade --force
要配置image模塊并自定義它的行為，你可以使用next .config中的image屬性：
配置參數
示例
export default defineNuxtConfig({image: {// Options}
})
詳細參數可參考上文實戰示例，下文詳細解釋參數信息：
inject
默認情況下，nuxt Image v1采用可組合的方法。如果不使用這些組件，就不會向包中添加額外的代碼。但是，如果您希望全局初始化將在整個應用程序中可用的 $img 幫助，則可以這樣做。
示例
export default defineNuxtConfig({image: {inject: true}
})
quality
生成圖像的質量。?
?
您還可以在組件級別使用質量屬性覆蓋此選項。
示例
export default defineNuxtConfig({image: {quality: 80,}
})
format
Default: ['webp']
您可以使用該選項為<NuxtPicture>使用的圖像配置默認格式。支持的格式有webp、avif、jpeg、jpg、png和gif。
格式的順序很重要，因為瀏覽器支持的第一種格式將被使用。您可以傳遞多個值，如['avif', 'webp']。
還可以通過使用format prop在組件級別重寫此選項。
示例
export default defineNuxtConfig({image: {format: ['webp']}
})
screens
預定義屏幕尺寸的列表。?
?
這些大小將用于生成圖像的調整大小和優化版本（例如，使用大小修改器）。
示例
export default defineNuxtConfig({image: {// The screen sizes predefined by `@nuxt/image`:screens: {'xs': 320,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'xxl': 1536,'2xl': 1536},}
})
與Tailwind CSS共享相同的命名和大小，只是增加了xs和xxl（為了向后兼容）。
domains
為了在外部網站上啟用圖像優化，可以指定允許優化的域。此選項將用于檢測是否應該優化遠程映像。這是確保外部url不會被濫用所必需的。
示例
export default defineNuxtConfig({image: {domains: ['nuxtjs.org']}
})
presets
預設是項目的預定義配置集合。預設將幫助您統一整個項目中的圖像。
示例 nuxt.config.ts
export default defineNuxtConfig({image: {presets: {avatar: {modifiers: {format: 'jpg',width: 50,height: 50}}}}
})
示例 index.vue
<template><NuxtImg preset="avatar" src="/nuxt-icon.png" />
</template>
providers
為了創建和使用自定義提供程序，您需要使用providers選項并定義自定義提供程序。
示例 nuxt.config.ts
export default defineNuxtConfig({image: {providers: {random: {provider: '~/providers/random',options: {}}}}
})
示例 index.vue
<template><NuxtImg provider="random" src="main.png" width="300" height="169" />
</template>
provider
默認值：ipx（或ipxStatic，如果與靜態nitro預設一起使用，例如運行nuxt generate）?
?
我們可以指定在組件中沒有指定或調用$img時使用的默認提供商。
示例 nuxt.config.ts
export default defineNuxtConfig({image: {provider: 'twicpics',twicpics: {baseURL: 'https://nuxt-demo.twic.pics'}}
})
modifiers
您可以為所選的提供程序設置默認修飾符。
示例
export default defineNuxtConfig({image: {provider: 'cloudinary',cloudinary: {baseURL: 'https://res.cloudinary.com/<company>/image/fetch/',modifiers: {effect: 'sharpen:100',quality: 'auto:best',}}}
})
densities
Default: [1, 2]
指定一個值來處理devicePixelRatio > 1（這些是帶有視網膜顯示和其他的設備）。您必須指定要為哪個devicePixelRatio值調整圖像。?
?
你可以在MDN上關于devicePixelRatio的信息。
示例 nuxt.config.ts
export default defineNuxtConfig({image: {densities: [1, 2, 3],}
})
dir
Default: public
這個選項允許您在使用ipx或ipxStatic提供程序時指定源映像的位置。?
?
例如，你可能希望源圖像在assets/images目錄中，而不是默認的公共目錄中，這樣源圖像就不會被復制到dist中并被部署：
示例 nuxt.config.ts
export default defineNuxtConfig({image: {dir: 'assets/images'}
})
注:?
?
對于ipxStatic提供程序，如果在生成過程中沒有抓取圖像（不可訪問的模式、頁面或動態運行時大小），將dir從public更改將導致404錯誤。?
對于ipx提供程序，也要確保部署自定義的目錄。?
對于某些提供程序（如vercel），不支持使用public/以外的目錄作為資產，因為調整大小發生在運行時（而不是構建/生成時），并且從public/目錄（部署URL）獲取源代碼。
alias
這個選項允許你為src指定別名。?
?
當使用默認的ipx提供程序時，URL別名會在服務器端縮短。這對于優化外部url而不將它們包含在HTML中特別有用。?
?
當使用其他提供程序時，別名將在運行時解析并包含在HTML中。（只是用法簡化了）
示例 nuxt.config.ts
export default defineNuxtConfig({image: {domains: ['images.unsplash.com'],alias: {unsplash: 'https://images.unsplash.com'}}
})
示例 使用別名之前
<NuxtImg src="https://images.unsplash.com/<id>" />
生成
<img src="/_ipx/https://images.unsplash.com/<id>">
示例 在使用別名之后
<NuxtImg src="/unsplash/<id>" />
生成
<img src="/_ipx/unsplash/<id>" />
Providers
nuxt Image支持多個提供程序以實現高性能。
簡介?
?
提供者是next Image和第三方圖像轉換服務之間的集成。每個提供者負責為該圖像轉換服務生成正確的url。?
?
next Image可以配置為使用任何外部圖像轉換服務。簽出側欄以獲取預配置的提供程序列表。?
?
如果您正在尋找不受支持的特定提供程序，您可以創建自己的提供程序。?
?
next Image將自動優化<NuxtImg>或<NuxtPicture>源，并接受指定目標的所有選項，除了特定于其他提供程序的修飾符。
默認提供者?
?
nuxt Image的默認優化器和提供程序是ipx。任何一個選項都可以在沒有任何配置的情況下使用。
本地圖片?
?
圖像應該存儲在項目的public/目錄中。?
?
例如，當使用 <NuxtImg src="/nuxt-icon.png" /> 時，它應該放在public/文件夾下的 public/nuxt-icon.png 路徑下。?
?
?
注意：存儲在assets/目錄中的圖像不會被nuxt Image處理，因為這些圖像是由您的打包器（如Vite或webpack）管理的。
遠程圖像?
?
使用默認提供程序，您還可以優化外部url。為此，您需要將它們添加到 domains 選項中。?
?
還可以通過將 NUXT_IMAGE_DOMAINS 環境變量設置為逗號分隔的域列表來為遠程映像添加域。
示例?
NUXT_IMAGE_DOMAINS="example.com,yourdomain.com"
環境檢測?
?
您可以使用 NUXT_IMAGE_PROVIDER 環境變量設置默認提供程序。?
?
自動檢測到的提供者：
Vercel -?優化圖像在Vercel的邊緣網絡，下文單獨介紹
自定義服務提供方程序?
?
可以定義自己的提供程序，詳細了解如何創建自定義提供程序。
下文單獨介紹
?NuxtImg
了解如何使用和配置next Image組件。
簡介
<NuxtImg>是本機<img>標記的臨時替代品。?
?
使用內置提供程序來優化本地和遠程映像?
將src轉換為提供程序優化的url?
根據寬度和高度自動調整圖像大小?
提供大小選項時生成響應大小?
支持本機延遲加載以及其他<img>屬性
用法?
?
<NuxtImg>直接輸出原生img標記（沒有任何包裝器）。像使用<img>標簽一樣使用它：
示例?
<NuxtImg src="/nuxt-icon.png" />
輸出
<img src="/nuxt-icon.png" />
使用默認的提供程序，您應該將 /nuxt-icon.png 放在 public/ 目錄中，以便讓上面的示例工作。
元素
custom
自定義道具決定了<NuxtImg>應該作為一個簡單的<img>元素呈現還是僅僅作為自定義呈現的提供者。當設置為true時，它禁用默認呈現行為，允許完全控制圖像的顯示方式。這對于實現自定義功能（如占位符）非常有用。?
?
當使用自定義道具時，<NuxtImg>將必要的數據和屬性傳遞給其默認槽。你可以通過v-slot指令訪問以下值：?
?
imgAttrs: <img>元素的屬性（例如，alt, width, height, srcset, sizes）。?
src：計算圖像源URL。?
isLoaded：一個布爾值，指示圖像是否已加載。?
示例使用
<nuxt-imgsrc="/images/nuxt.png"alt="image"width="400" height="400" :custom="true"v-slot="{ src, isLoaded, imgAttrs }"
><!-- Show the actual image when loaded --><img v-if="isLoaded" v-bind="imgAttrs" :src="src" /><!-- Show a placeholder while loading --><img v-else src="https://placehold.co/400x400" alt="placeholder" />
</nuxt-img>
這種方法確保了自定義呈現場景的靈活性，而<NuxtImg>繼續在幕后處理圖像優化和數據供應。
src?
?
鏡像文件路徑?
?
SRC應該是公共/目錄中靜態圖像的絕對路徑的形式。否則，提供程序期望的以/或URL開頭的路徑。
示例
<NuxtImg src="/nuxt.png" />
為了在src中使用外部url進行圖像優化，我們需要使用domains選項將它們列入白名單。
width / height
指定圖像的寬度/高度。?
?
使用所需的寬度/高度的靜態大小的圖像，如圖標或頭像?
響應式圖像使用原始圖像的寬度/高度（當使用大小時）
alt
盡管next Image沒有應用任何特殊處理，但值得一提的是alt屬性。它是一個本地全局屬性，如果不能顯示圖像，則為圖像指定替代文本。?
?
它應該總是被提供。?
?
如果圖像包含信息，則文本應該描述圖像?
如果圖像位于<a>元素中，文本應該解釋鏈接的位置?
如果圖像僅用于裝飾，則使用alt=“”
eg
<NuxtImg src="/nuxt.png" alt="My image file description" />
sizes
指定響應大小。?
?
這是一個以空格分隔的屏幕大小/寬度對列表。在上文nuxt.config.ts文件默認配置可以參看默認大小。?
?
默認情況下，next生成響應優先大小。?
?
如果你省略了屏幕尺寸前綴（比如sm:），那么這個尺寸就是圖像的“默認”尺寸。否則，next將選擇最小的大小作為圖像的默認大小。?
這個默認大小一直使用到下一個指定的屏幕寬度，依此類推。每個指定的尺寸對都適用-所以md:400px意味著圖像將在md屏幕上的大小為400px。?
例子:
<NuxtImgsrc="/logos/nuxt.png"sizes="100vw sm:50vw md:400px"
/>
densities
為增加像素密度的屏幕生成特殊版本的圖像。?
?
例子:
<NuxtImgsrc="/logos/nuxt.png"height="50"densities="x1 x2"
/>
<!--
<imgsrc="/_ipx/w_50/logos/nuxt.png" srcset="/_ipx/w_100/logos/nuxt.png x2"
/>
-->
placeholder
在實際圖像完全加載之前顯示占位符圖像。?
?
您還可以使用自定義道具制作任何您想要的占位符。?
?
占位符道具可以是字符串、布爾值、數字或數組。每種情況的用法如下所示。
<!-- 自動生成一個基于原始圖像的占位符 -->
<NuxtImg src="/nuxt.png" placeholder /><!-- 為自動生成的占位符 設置寬度、高度 -->
<NuxtImg src="/nuxt.png" :placeholder="[50, 25]" /><!-- 為自動生成的占位符 設置寬度、高度、質量和模糊 -->
<NuxtImg src="/nuxt.png" :placeholder="[50, 25, 75, 5]" /><!-- 設置自動生成占位符的寬度和高度，圖像將是一個正方形 -->
<NuxtImg src="/nuxt.png" :placeholder="15" /><!-- 提供你自己的圖片 -->
<NuxtImg src="/nuxt.png" placeholder="./placeholder.png" />
你也可以利用useImage（）來生成一個基于原始圖像的占位符圖像，如果源是SVG或者你想更好地控制修飾符，這是有用的：
<script setup>
const img = useImage()
</script><template><NuxtImg :placeholder="img(`/nuxt.svg`, { h: 10, f: 'png', blur: 2, q: 50 })" src="/nuxt.svg`" />
</template>
placeholder-class
在使用占位符時，可以使用占位符類將類應用于原始的底層<img>元素（在呈現占位符時）。
<!-- 對原始圖像應用靜態類 -->
<NuxtImg src="/nuxt.png" placeholder placeholder-class="custom" /><!-- 對原始圖像應用動態類 -->
<NuxtImg src="/nuxt.png" placeholder :placeholder-class="custom" />
如果你只需要對加載的圖像應用一些CSS，你可以這樣做：
img:not(.my-placeholder-class) {/* styles here */
}
provider
使用其他提供商，而不是在nuxt .config中指定的默認提供商選項?
?
示例 nuxt.config.ts
export default defineNuxtConfig({image: {cloudinary: {baseURL: 'https://res.cloudinary.com/nuxt/image/upload/',},},
})
index.vue
<template><NuxtImgprovider="cloudinary"src="/remote/nuxt-org/blog/going-full-static/main.png"width="300"height="169"/>
</template>
preset
預設是預定義的圖像修改器集，可用于在項目中創建統一形式的圖像。
我們可以使用next .config中的預置選項來定義預置
示例 nuxt.config.ts
export default defineNuxtConfig({image: {presets: {cover: {modifiers: {fit: 'cover',format: 'jpg',width: 300,height: 300,},},},},
})
index.vue
<template><NuxtImg preset="cover" src="/nuxt-icon.png" />
</template>
format
如果您想以特定格式提供圖像，請使用此道具。
示例
<NuxtImg format="webp" src="/nuxt-icon.png" ... />
可用的格式是webp， avif, jpeg, jpg, png， gif和svg。如果沒有指定格式，它將遵循默認的圖像格式。
quality
生成圖像的質量。
<NuxtImg src="/nuxt.jpg" quality="80" width="200" height="100" />
fit
fit屬性指定圖像的大小。此屬性可以使用五個標準值。
cover: （默認）保留寬高比，確保圖像覆蓋兩個提供的尺寸裁剪/剪輯以適應。
contain:保留長寬比，在必要時使用“letterboxing”包含在兩個提供的維度中。
fill: 忽略輸入的寬高比，并拉伸到兩個提供的尺寸。
inside: 保留寬高比，將圖像調整為盡可能大，同時確保其尺寸小于或等于指定的兩個。
outside: 保留寬高比，將圖像調整為盡可能小，同時確保其尺寸大于或等于指定的尺寸。
示例
<NuxtImg fit="cover" src="/nuxt-icon.png" width="200" height="100" />
一些提供程序支持其他值。
modifiers
除了標準修飾符之外，每個提供程序可能還有自己的附加修飾符。由于這些修飾符依賴于提供程序，因此請參閱其文檔以了解可以使用哪些修飾符。?
?
使用modifiers道具可以使用這些轉換中的任何一種。
示例
<NuxtImgprovider="cloudinary"src="/remote/nuxt-org/blog/going-full-static/main.png"width="300"height="169":modifiers="{ roundCorner: '0:100' }"
/>
preload
如果您想預加載圖像，請使用此道具。這將在頁面頭部放置一個相應的 link 鏈接標記。
<NuxtImg preload src="/nuxt-icon.png" />
loading
這是一個原生屬性，它向瀏覽器提供了一個提示，告訴瀏覽器如何處理視圖外的圖像加載。自2022年3月起，所有主流瀏覽器的最新版本都支持它。?
?
設置loading="lazy"來延遲圖像的加載，直到它出現在視窗中。
示例
<NuxtImg src="/nuxt-icon.png" loading="lazy" />
nonce
這是一個本地全局屬性，它定義了一個加密nonce（一次使用的數字），內容安全策略可以使用它來確定是否允許對給定元素進行給定的獲取。提供nonce允許您避免使用CSP不安全的內聯指令，該指令將允許列出所有內聯腳本或樣式。
示例
<NuxtImg src="/nuxt-icon.png" :nonce="nonce" /><script lang="ts" setup>
// useNonce不是由next /image提供的，但可能是
// 由另一個模塊提供，例如nuxt-security
const nonce = useNonce()
</script>
Events
由<NuxtImg>和<NuxtPicture>組件包含的<img>元素發出的本地事件被重新發出，并且可以被監聽。?
?
示例：監聽來自<NuxtImg>的本機onLoad事件
<NuxtImgsrc="/images/colors.jpg"width="500"height="500"@load="doSomethingOnLoad"
/>
晚點再更新
)
