Nuxt框架中内置组件详解及使用指南（五）

title: Nuxt框架中内置组件详解及使用指南（五）
date: 2024/7/10
updated: 2024/7/10
author: cmdragon

excerpt:
摘要：本文详细介绍了Nuxt框架中和组件的使用方法与配置，包括安装、基本用法、属性详解、示例代码以及高级功能如事件处理、自定义图片属性和图片格式回退策略。同时，还简述了组件的功能与基本用法，展示了如何将组件内容传送到DOM中的不同位置，特别是对于模态框和侧边栏等UI元素的布局优化。

categories:

前端开发

tags:

NuxtJS
组件
图像
优化
响应
预览
传送

扫描二维码关注或者微信搜一搜：`编程智域前端至全栈交流与成长`

Nuxt 中`<NuxtErrorBoundary>`组件的使用指南与示例

Nuxt 提供了一个组件来处理自动图像优化。

安装与配置

首先，确保你已经安装了Nuxt.js，并且你的项目中已经启用了Nuxt Image模块。这通常在项目创建时自动完成，如果没有，你可以按照以下步骤操作：

npx nuxi@latest module add image

基本用法

组件可以直接替代原生[图片上传失败…(image-ce4c63-1720592953905)]标签，并输出一个原生的img标签，没有任何包装器。以下是如何使用它的基本示例：

<template>
  <NuxtImg src="/path/to/image.png" />
</template>

这将创建一个指向/path/to/image.png的img标签。

属性详解

以下是一些主要的属性及其用法：

src: 图像文件的路径。应采用目录中静态图像的绝对路径形式。
```
<NuxtImg src="/path/to/image.png" />
```

width / height: 指定图像的宽度/高度。

<NuxtImg src="/path/to/image.png" width="200" height="200" />

sizes: 指定响应大小。

<NuxtImg src="/path/to/image.png" sizes="sm:200px md:400px lg:600px" />

densities: 为不同像素密度的屏幕生成特殊图像版本。
```
<NuxtImg src="/path/to/image.png" densities="x1 x2" />
```

placeholder: 在实际图像完全加载之前显示占位符图像。

<NuxtImg src="/path/to/image.png" placeholder="./placeholder.png" />

provider: 使用其他提供程序而不是默认提供程序。
```
<NuxtImg provider="cloudinary" src="/remote/image.png" />
```

preset: 使用预定义的图像修饰符集。

<NuxtImg preset="cover" src="/path/to/image.png" />

format: 指定图像的格式。

<NuxtImg format="webp" src="/path/to/image.png" />

quality: 生成图像的质量。

<NuxtImg src="/path/to/image.jpg" quality="80" />

fit: 指定图像的尺寸。

<NuxtImg fit="cover" src="/path/to/image.png" />

modifiers: 使用提供程序的额外修饰符。

<NuxtImg src="/path/to/image.png" modifiers="{ roundCorner: '0:100' }" />

preload: 预加载图像。

<NuxtImg preload src="/path/to/image.png" />

loading: 控制图像的加载行为。

<NuxtImg src="/path/to/image.png" loading="lazy" />

nonce: 用于内容安全策略的加密随机数。

<NuxtImg src="/path/to/image.png" :nonce="nonce" />

示例

以下是一个使用组件的完整示例，展示了如何结合使用多个属性：

<template>
  <NuxtImg
    src="/path/to/image.png"
    width="200"
    height="200"
    sizes="sm:100px md:200px lg:400px"
    placeholder="./placeholder.png"
    provider="cloudinary"
    preset="cover"
    format="webp"
    quality="80"
    fit="cover"
    modifiers="{ roundCorner: '0:100' }"
    preload
    loading="lazy"
    :nonce="nonce"
  />
</template>

在这个示例中，我们使用了多个属性来优化和展示图像。

事件

组件支持原生事件，你可以通过监听这些事件来执行特定的操作。例如：

<template>
  <NuxtImg
    src="/path/to/image.png"
    @load="handleImageLoad"
  />
</template>

<script setup>
function handleImageLoad(event) {
  console.log('Image has been loaded!', event);
}
</script>

在这个示例中，当图像加载完成时，handleImageLoad函数将被调用。

Nuxt 3 中`<NuxtPicture>`组件的使用指南与示例

引入组件

在 Nuxt.js 项目中，您可以直接在页面或组件中引入 <NuxtPicture> 和 <NuxtImg> 组件。

import { NuxtPicture, NuxtImg } from '#components';

示例代码

解释

高级配置

设置回退格式

自定义图片属性

基本用法

1. 传送到 body

2. 客户端传送

余下文章内容请点击跳转至个人博客页面或者扫码关注或者微信搜一搜：编程智域前端至全栈交流与成长，阅读完整的文章：Nuxt框架中内置组件详解及使用指南（五） | cmdragon’s Blog

往期文章归档：

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。