图片 Image
不可或缺的组件，支持预览模式。
基本使用
Show Code
vue
<template>
<n-image src="http://img63.ddimg.cn/upload_img/00890/tsx/tsx-1-1689673034.jpg" />
</template>可预览模式
预览
Show Code
vue
<template>
<n-image src="http://img63.ddimg.cn/upload_img/00890/tsx/tsx-2-1689673034.jpg" previewMode />
</template>多张图片预览
可循环切换图片，并支持键盘 (left / right / up / down) 按键切换
预览
预览
预览
预览
预览
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const images = ref([
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-1-1689673034.jpg',
name: 'image-1.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-2-1689673034.jpg',
name: 'image-2.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-3-1689673034.jpg',
name: 'image-3.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-4-1689673034.jpg',
name: 'image-4.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-5-1689673034.jpg',
name: 'image-5.jpg',
},
])
</script>
<template>
<n-image :src="images" loop previewMode />
</template>相册模式
只显示首张，通过键盘按钮控制切换
预览
Show Code
vue
<script setup lang="ts">
import { ref } from 'vue'
const images = ref([
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-2-1689673034.jpg',
name: 'image-1.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-1-1689673034.jpg',
name: 'image-2.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-3-1689673034.jpg',
name: 'image-3.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-4-1689673034.jpg',
name: 'image-4.jpg',
},
{
src: 'http://img63.ddimg.cn/upload_img/00890/tsx/tsx-5-1689673034.jpg',
name: 'image-5.jpg',
},
])
</script>
<template>
<n-image :src="images" loop album previewMode />
</template>自定义配置
更改缩放比率和最大最小缩放比例
preview
Show Code
vue
<template>
<n-image previewMode :width="300" :height="300" fit="cover" src="http://img63.ddimg.cn/upload_img/00890/tsx/tsx-1-1689673034.jpg">
<template #preview>
<p class="u-pre">preview</p>
</template>
</n-image>
</template>API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| src | 图像地址 | 图像地址数组 | string |
| name | 图像名称，没有传入图片名时自动从图像地址src中读取 | string | '' |
| previewMode | 是否为可预览模式 | boolean | false |
| width | 图像宽度，单位px | string | number |
| height | 图像高度，单位px | string | number |
| fit | 图像如何适应容器高度和宽度，可选 fill(填充)、contain(等比缩放包含)、cover(等比缩放覆盖) | 'contain' | 'fill' |
| preview | 预览文本 | string | slot |
| zoomRatio | 每次缩放比率 | number | 0.1 |
| minZoomScale | 最小缩放比例 | number | 0.1 |
| maxZoomScale | 最大缩放比例 | number | 10 |
| resetOnDbclick | 缩放移动旋转图片后，是否可以双击还原 | boolean | true |
| loop | 是否可以循环切换图片 | boolean | false |
| ablum | 是否相册模式，即从一张展示图片点开相册 | boolean | false |