魏晓东 发表于 2025-3-2 08:33:12

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

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/h30WCAG H30：提供链接文本wcag/h32WCAG H32：提供提交按钮wcag/h36WCAG H36：要求在图片上使用全部文本作为提交按钮wcag/h37WCAG H37：在img元素上使用alt属性wcag/h63WCAG H63：使用scope属性来关联标题单元格和数据单元格wcag/h67WCAG H67：在img元素上使用空alt文本和没有标题属性wcag/h71WCAG H71：为表单控件组提供形貌



验证


require-csp-nonce需要CSP的资源require-sri要求资源的SRI


SEO


long-title要求标题不要有太长的笔墨


模式


attr-case要求属性名使用特定的大小写attr-pattern要求属性匹配已设置的模式attr-quotesRequire attribute quotingattribute-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开始并递增1missing-doctype要求文档具有doctypeno-dup-id不允许重复的idno-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 添加如下
https://i-blog.csdnimg.cn/direct/400054efb6cc43259dbbbd1a1f0d2062.png

删除lockfile  (package-lock.json, yarn.lock, or pnpm-lock.yaml) 并重新安装依靠项。


退出边缘通道


https://i-blog.csdnimg.cn/direct/43a9f966b85340ad9e49217907f66dd8.png

删除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:

指定一个值来处置惩罚devicePixelRatio > 1（这些是带有视网膜显示和其他的装备）。您必须指定要为哪个devicePixelRatio值调整图像。 
 
你可以在MDN上阅读更多关于devicePixelRatio的信息。

示例 nuxt.config.ts
export default defineNuxtConfig({
image: {
    densities: ,
}
})


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 }"
>
<!-- 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。 

例子:
<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="" />

<!-- 为自动生成的占位符 设置宽度、高度、质量和模糊-->
<NuxtImg src="/nuxt.png" :placeholder="" />

<!-- 设置自动生成占位符的宽度和高度，图像将是一个正方形 -->
<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企服之家，中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: nuxt常用组件库html-validator应用剖析