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"
/>
晚点再更新
