nuxt常用组件库html-validator应用剖析

魏晓东 · 前天 08:33

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 devDependency
modules: ['@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-img
src="/images/nuxt.png"
alt="image"
width="400"
height="400"
:custom="true"
v-slot="{ src, isLoaded, imgAttrs }"
>
<img
v-if="isLoaded"
v-bind="imgAttrs"
:src="src"
/>
<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。

例子:

<NuxtImg
src="/logos/nuxt.png"
sizes="100vw sm:50vw md:400px"
/>

复制代码

densities

为增长像素密度的屏幕生成特殊版本的图像。

例子:

<NuxtImg
src="/logos/nuxt.png"
height="50"
densities="x1 x2"
/>
<!--
<img
src="/_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>
<NuxtImg
provider="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道具可以使用这些转换中的任何一种。

示例

<NuxtImg
provider="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事件

<NuxtImg
src="/images/colors.jpg"
width="500"
height="500"
@load="doSomethingOnLoad"
/>

复制代码

晚点再更新

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

nuxt常用组件库html-validator应用剖析

0 个回复

快速回复

楼主热帖

标签云