当前位置：首页 > news >正文

vite5+vue3+Ts5 开源图片预览器上线

news 来源：原创 2025/7/15 23:46:07

images-viewer-vue3：一款Vue3的轻量级图像查看器，它基于Flip动画技术，支持PC和h5移动网页预览照片，如果它是Vue3开发的产品。
npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTab=readme
在这里插入图片描述

Flip 动画 <= 60fps

在这里插入图片描述

技术栈

这款图片预览器是基于vite5+vue3+Ts5技术栈的，基于vite5的库模式打包，发布包大小217kb。使用辅助工具库如下：

hotkeys-js；
vite-plugin-dts；
@vueuse/core。

已实现功能

Rotate image：旋转图片
Zoom image：缩放图片
Flip image：翻转图片
Drag image：拖拽图片
Download image：下载图片
AutoPlay image：播放图片列表
Full screen preview image：全屏预览图片
Image information：图像基本信息

用法

安装

npm install images-viewer-vue3
--or
pnpm add images-viewer-vue3
--or
yarn add images-viewer-vue3

配置main.ts|js

import { createApp } from "vue";
import App from "./App.vue";
import ImagesViewerVue3 from 'images-viewer-vue3';
import router from "./router";const app = createApp(App)app.use(ImagesViewerVue3, {zIndex: 999, // Default 999language: 'zh', // Default language 'zh'scaleRatio: 1, // Default 1rotateRatio: 90, // Default 90 degreesisEnableDrag: true, // Enabled by defaultisEnableWheel: true, // Enabled by defaultplaySpeed: 2000, // Default 2000 ms
})
app.use(router)app.mount("#app")

经过上述配置之后就可以放心大胆在vue3项目中使用images-viewer-vue3图片预览器了。

指令预览图片

支持图片懒加载和预览图片指令同时绑定同一个图片元素。

<img v-for="(item, index) in dataList" :key="index" :src="item" v-image-viewer/>
<img src="https://picsum.photos/id/10/2500/1667" v-image-viewer/>
<img v-image-viewer v-lazy-image="'https://picsum.photos/id/11/2500/1667'"/>
<img v-image-viewer v-lazy-image="currentSrc"/><script setup lang="ts">
import { ref } from 'vue'
const currentSrc = ref('https://picsum.photos/id/13/367/267')
</script>

在这里插入图片描述

组件预览图片

<ImagesViewerVue3><img src="https://picsum.photos/id/6/5000/3333"/><img src="https://picsum.photos/id/10/2500/1667"/><img src="https://picsum.photos/id/11/2500/1667"/>
</ImagesViewerVue3>

在这里插入图片描述

API 预览图片

<img @click="previewImage" src="https://picsum.photos/id/19/2500/1667"/><script setup lang="ts">
import { imageViewerApi, onUpdate } from 'images-viewer-vue3'// Monitor current picture information
onUpdate((image:string, index: number) => {console.log(image, index)
})const previewImage = (evt) => {if (!evt.target) returnconst iDom = evt.target as HTMLImageElementimageViewerApi({// Custom Navigation Image Highlighting IndexspecifyIndex: 0,// Current image srccurrent: iDom.src,// Enable flip animationimageDom: iDom,// Preview more pictures// images: ['src','src1', 'src2', ...],})
}
</script>

在这里插入图片描述
组件持续维护更新中…

vite5+vue3+Ts5 开源图片预览器上线

images-viewer-vue3：一款Vue3的轻量级图像查看器，它基于Flip动画技术，支持PC和h5移动网页预览照片，如果它是Vue3开发的产品。 npm开源地址:https://www.npmjs.com/package/images-viewer-vue3?activeTabreadme Flip 动画 < …...

编程日记 2025/7/15 23:46:07

Qt开发：元对象系统的介绍和使用

文章目录概述元对象系统的概念和组成QObject 的详细介绍1.QObject 的主要特性信号与槽机制动态属性对象树（Object Trees）事件处理 2.QMetaObject的主要特性函数签名常用功能概述 Qt本身并不是一种编程语言，它实质上是一个跨平台的C开发类库…...

编程日记 2025/7/16 9:36:10

.vscode文件中各个脚本需要修改的地方

NOTE： 此篇文章由VSCode编辑GCC for ARM交叉编译工具链Makefile构建OpenOCD调试（基于STM32的标准库）派生而来，对.vscode文件中各个脚本需要修改的地方作补充说明。 tasks.json 该json文件的主要作用：使用XX名称去执行…...

编程日记 2025/7/14 19:52:35

JavaScript模块化规范

欢迎来到“雪碧聊技术”CSDN博客！ 在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将…...

编程日记 2025/7/16 18:51:47

第二篇：k8s工作流程

我们来看通过deployment部署pod的常规流程： kubectl向apiserver发送部署请求（例如使用 kubectl create -f deployment.yml）apiserver将 Deployment 持久化到etcd；etcd与apiserver进行一次http通信。controller manager通过watch a…...

编程日记 2025/7/16 19:13:31

什么是数据架构？

数据架构是如何使用数据的蓝图--它是数据和数据相关资源的高层结构，是整个组织的数据框架，包括模型、规则和标准。通过高效的数据架构，企业可以跟踪整个 IT 基础设施中数据的获取、移动、存储、安全性和可访问性。数据架构总览数据架构是…...

编程日记 2025/7/15 1:29:10

ChatGPT、Python和OpenCV支持下的空天地遥感数据识别与计算——从0基础到15个案例实战

在科技飞速发展的时代，遥感数据的精准分析已经成为推动各行业智能决策的关键工具。从无人机监测农田到卫星数据支持气候研究，空天地遥感数据正以前所未有的方式为科研和商业带来深刻变革。然而，对于许多专业人士而言，如何高效地处…...

编程日记 2025/7/16 13:39:24

微信小程序权限授权工具类

最近写微信小程序的时候需要在页面获取设备权限，又不想每个页面都写，就写了一个工具类方便管理 /*** 权限工具类用于获取授权* 权限工具类使用方法，注意调用时函数需要定义为异步函数 async* import PermissionUtils from "./permissio…...

编程日记 2025/7/14 1:35:02

CT中的2D、MPR、VR渲染、高级临床功能

CT中的2D、MPR、VR渲染在CT（计算机断层扫描）中，2D、MPR（多平面重建）、VR（体积渲染）是不同的图像显示和处理技术，它们各自有独特的用途和优势。下面分别介绍这三种技术：…...

编程日记 2025/7/15 23:45:15

【MySQL】Windows下重启MySQL服务时，报错：服务名无效

1、问题描述在终端中，停止、启动MySQL服务时报错：服务名无效 2、原因分析 1）权限不够如果是权限不够，会提示：系统错误5，拒绝访问。 2）服务名错误如果是服务名错误，会提示“…...

编程日记 2025/7/15 11:11:58

java枚举的基本用法

在 Java 中，枚举（enum）是一种特殊的类，用于定义一组常量。它可以使代码更具可读性和可维护性。枚举类型可以用于表示固定的、有限的值集合，比如星期几、季节、方向等。以下是一些常见的枚举用法示例： 1.…...

编程日记 2025/7/16 14:01:44

Web网络安全

一. 浏览器系统安全方面，使用多进程方案，而js主线程运行在渲染进程中，渲染进程时运行在沙箱中的，没有对本地OS文件的直接读写权限，所以需要通过IPC与浏览器主线程通信，才可以获取cookie等信息，这…...

编程日记 2025/7/12 19:03:33

【分子材料发现】——GAP：催化过程中吸附构型的多模态语言和图学习（数据集处理详解）（二）

Multimodal Language and Graph Learning of Adsorption Configuration in Catalysis https://arxiv.org/abs/2401.07408Paper Data: https://doi.org/10.6084/m9.figshare.27208356.v2 1 Dataset CatBERTa训练的文本字符串输入来源于Open Catalyst 2020 （OC20…...

编程日记 2025/7/14 4:09:39

matlab Delaunay三角剖分提取平面点云的边界

目录一、算法原理1、算法概述2、参考文献二、代码实现三、结果展示四、详细过程版一、算法原理 1、算法概述 Delaunay三角网在生成三角网过程中，以最近的三点形成三角形，且各三角形的边皆不相交，每条边都使用所在的三角形的顶点验算并记录相应的2个顶点坐标。整个验算过程…...

编程日记 2025/7/16 9:25:23

Spring07——AOP通知以及几个相关案例

切入点表达式注意，不是参数，是参数类型可以使用通配符描述切入点，快速描述 ■ *：单个独立的任意符号，可以独立出现，也可以作为前缀或者后缀的通配符出现 execution(public∗com.itheima.∗.UserServi…...

编程日记 2025/7/14 7:14:12

【AI工具】强大的AI编辑器Cursor详细使用教程

目录一、下载安装与注册二、内置模型与配置三、常用快捷键四、项目开发与问答五、注意事项与技巧参考资料近日，由四名麻省理工学院（MIT）本科生共同创立的Anysphere公司宣布，其开发的AI代码编辑器Cursor在成立短短两年…...

编程日记 2025/7/14 18:01:38

CV工程师专用键盘开源项目硬件分析

1、前言作为一个电子发烧友，你是否有遇到过这样的问题呢。当我们去查看函数定义的时候，需要敲击鼠标右键之后选择go to definition。更高级一些，我们使用键盘的快捷键来查看定义，这时候可以想象一下，你左手按下ALT&a…...

编程日记 2025/7/11 17:25:06

STM32标准固件库官网下载方法

Keil标准固件库官网下载方法 Keil中DFP.pack下载方法打开keil官网 Keil 官网 www.keil.com 点击产品点击“Products” 点击 “Arm Cortex-M” 下拉找到CMSIS-Packs 点击CMSIS-Pack index 搜索对应的MCU，我这里是STM32F4 注意搜索对应系列就好点击下载...

编程日记 2025/7/13 16:49:04

数据库原理实验实验四统计查询和组合查询

实验目的和要求加深对统计查询的理解，熟练使用聚簇函数。实验环境SQL SERVER 2008 SQL Server Management Studio 20 实验内容与过程题目一：学生（学号，年龄，性别，系名）课程（课号，课名，学分，学时）选课（学号，课号，成绩）根据上面基本表的信息完成下列查…...

编程日记 2025/6/28 18:56:28

【电子通识】案例：USB Type-C USB 3.0线缆做直通连接器TX/RX反向

【电子通识】案例：连接器接线顺序评估为什么新人总是评估不到位？-CSDN博客这个文章的后续。最近在做一个工装项目，需要用到USB Type-C线缆做连接。此前已经做好了线序规划，结果新人做成实物后发现有的USB Type-C线缆可用，有的不行。其中发现USB3.0的TX-RX信号与自己的板卡…...

编程日记 2025/7/15 1:37:49

【Linux从青铜到王者】数据链路层（mac，arp）以及ip分片

局域网通信通过之前的学习，我们了解了应用层，传输层，网络层的协议和作用，这里先做个总结应用层——http，https协议，也可以自己定义一套，作用是进行数据的处理传输层——tcp，udp协…...

编程日记 2025/7/15 21:29:08

MyBatis注解开发

1.配置MyBatis_ssm配置mybits-CSDN博客 2.Mybaits实现增删改查-CSDN博客 3.MyBatis构建动态SQL-CSDN博客目录一、注解开发的定义二、SQL常用注解三、使用注解完成CRUD 1.查找所有 2.通过id查询 3.增加 4.更新 5.删除 6.查询数量 7.模糊查询一、注解开发的定义 …...

编程日记 2025/7/13 22:24:48

Unity引擎UI滚动列表——滚动复用扩展应用

大家好，我是阿赵。之前介绍了滚动复用的基础用法。上一个例子里面，是一个竖向单列的滚动列表展示。这一次来扩展一下用法。如果不知道上一次例子的，可以先往前翻一下，上面有例子的详情、原理解释和代码。一、多列的滚动复…...

编程日记 2025/7/12 19:41:16

MySQL 死锁排查

私人博客传送门 MySQL 死锁排查...

编程日记 2025/7/1 20:48:31

AI - 浅聊一下基于LangChain的AI Agent

AI - 浅聊一下基于LangChain的AI Agent 大家好，今天我们来聊聊一个很有意思的主题： AI Agent ，就是目前非常流行的所谓的AI智能体。AI的发展日新月异，都2024年末了，如果此时小伙伴们对这个非常火的概念还不清楚的话&a…...

编程日记 2025/7/16 1:35:59

校园综合服务小程序+ssm

摘要随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，校园综合服务被用户普遍使用，为方便用户能够可…...

编程日记 2025/7/16 7:57:17

RPC设计--TcpConnection和TcpServer

TcpConnection 对于服务端来说用来封装clientfd，对于client端来说，就是封装connect函数返回后的fd. 处理此fd上的读写，因此需要为其提供read\write方法，其方法内部调用系统的read\write函数，从fd中读写数据。当Fd上…...

编程日记 2025/7/12 8:06:34

Mysql 的 B+ 树是否包含行数据？

在 MySQL 中，是否在 B树的叶子节点上存储完整的行数据，取决于使用的存储引擎和索引类型： 聚簇索引 (Clustered Index) 叶子节点包含完整的行数据。适用场景：MySQL InnoDB 存储引擎的主键索引（或聚簇索引&#xf…...

编程日记 2025/7/14 21:26:52

CSS系列（2）-- 盒模型精解

前端技术探索系列：CSS 盒模型精解 📦 致读者：深入理解盒模型的本质 👋 前端开发者们， 今天我们将深入探讨 CSS 盒模型，这是构建网页布局的核心概念。通过本文，你将全面理解盒模型的工作原理及…...

编程日记 2025/7/9 23:08:14

Matlab在信号处理领域有哪些典型的设计实例？

以下是Matlab在信号处理领域的一些典型设计实例： 一、信号生成与频谱分析正弦信号生成与频谱分析 - 题目：生成一个频率为 f 10 H z f 10Hz f10Hz，采样频率为 f s 100 H z f_s100Hz fs100Hz，时长为 T 5 s T 5s T5s的正弦…...

编程日记 2025/7/15 1:12:52

frida(objection)中x.ts到x.py封装路径

objection run "android hooking list classes" 基于sensepost/objection.git/1.11.0 sensepost/objection.git/e7eb1 简版路径: android hooking list classes --> show_android_classes --> android_hooking_get_classes androidHookingGetClasses --&g…...

编程日记 2025/7/14 12:15:14

python学习笔记—1—基础环境配置和字面量

1. 字面量在代码中被写下来的固定值称为字面量 （1）整数字面量 666 （2）浮点字面量 6.66 （3）字符串字面量 "supercarrydoinb" 2. python中的数据类型 3. 打印字面量 print("666") …...

编程日记 2025/7/15 17:44:50

【Windows11系统局域网共享文件数据】

【Windows11系统局域网共享文件数据】 1. 引言1. 规划网络2. 获取必要的硬件3. 设置网络4. 配置网络设备5. 测试网络连接6. 安全性和维护7. 扩展和优化 2. 准备工作2.1: 启用网络发现和文件共享2.2: 设置共享文件夹 3. 访问共享文件夹4. 小贴士5. 总结 1. 引言随着家庭和小型办…...

编程日记 2025/7/11 20:04:24

包管理器npm, cnpm, yarn 和 pnpm 的命令

npm (Node Package Manager) 安装与更新 npm install 或 npm i： 安装项目依赖：根据 package.json 文件安装所有列出的依赖。参数： -S, --save：保存到 dependencies（默认行为）。-D, --save-dev：…...

编程日记 2025/7/14 18:06:34

MATLAB 最小二乘平面拟合（90）

MATLAB 最小二乘平面拟合（90）一、算法介绍二、算法实现1.代码2.结果：一、算法介绍平面方程： ax+by+cz+d = 0 执行任务：读取一组点云（这里用自定义生成的平面模拟点云代替，在其中添加了噪声来模拟真实的数据），使用最小二乘拟合平面，来输出平面参数，并可视化显示拟…...

编程日记 2025/7/16 17:34:44

kubesphere服务报错页面无法登陆

kubesphere的页面无法访问查看pod服务，发现ks-apiserver的pod一直在重启在所在node节点，执行dmesg -T 发现内存溢出修改deploy的memory的配置原本的request memory的值为100M 调整为2G 修改之后，服务正常启动，页面访问正常…...

编程日记 2025/7/3 23:00:17

filezilla连接不上虚拟机的解决方案

现象解决过程虚拟机终端输入ip addr 输出： 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000 link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00 inet 127.0.0.1/8 scope host lo valid_lft forever p…...

编程日记 2025/7/15 11:50:05

番茄钟与Todo List：用Go构建高效的时间管理工具

引言在当今快节奏的世界中，时间管理和任务组织变得越来越重要。为了帮助用户提高效率，我开发了一个基于Golang的开源项目，基于fyne的ui，它结合了经典的番茄工作法（Pomodoro Technique）和功能丰富的待办事…...

编程日记 2025/7/13 1:18:20

vim实用命令整理（常用的命令）

本章教程，总结自己平时使用vim过程中，经常使用的命令，分享给大家。一、高频使用 i：进入插入模式（光标处插入） a：进入插入模式（光标后插入） esc：返回普通模式 :：进入命令模式 :w：保存 :q：退出 :wq：保存并退出 :q!：强制退出不保存 :e filename：打开文件 :set n…...

编程日记 2025/7/6 23:00:57

METAGPT

METAGPT: META PROGRAMMING FOR A MULTI-AGENT COLLABORATIVE FRAMEWORK MetaGPT：面向多代理协作框架的元编程 1. 引言近年来，基于大型语言模型（LLMs）的多智能体系统在自动问题解决方面取得了显著进展。然而，现有的…...

编程日记 2025/7/15 8:57:14

LabVIEW调用Thorlabs的动态库进行开发

Thorlabs 产品在科研与生产领域中的应用广泛，当需要基于LabVIEW 进行二次开发时，可按照以下方法操作，以充分发挥设备性能并满足特定的项目需求。创建 Kinesis LabVIEW 项目文件和文件夹更详细的说明参见附件在 LabVIEW 的启动界面中选择…...

编程日记 2025/7/14 15:30:50

Lua使用点号和冒号的区别

首先建立一个table，再分别定义两个方法，如下： local meta {}function meta:test1(...)print(self)print("")for k,v in pairs({...}) doprint(v)end endfunction meta.test2(...)print(self)print("")for k,v in pairs…...

编程日记 2025/7/13 10:37:31

Rust学习笔记_13——枚举

Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包枚举文章目录枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型在Rust编程语言中，枚举（enum…...

编程日记 2025/7/13 23:04:27

集合框架（1）

集合框架（1） 1、数组的特点与弊端 （1）特点： 数组初始化以后，长度就确定了。数组中的添加的元素是依次紧密排列的，有序的，可以重复的。数组声明的类型，就决定了进行元素初…...

编程日记 2025/7/13 21:24:10

【Docker系列】Docker 构建多平台镜像：arm64 架构的实践

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/7/13 18:45:26

软件工程概述

软件不仅仅是一个程序代码。程序是一个可执行的代码，它提供了一些计算的目的。软件被认为是集合可执行的程序代码，相关库和文档的软件。当满足一个特定的要求，就被称为软件产品。工程是所有有关开发的产品，使用良好定义的&…...

编程日记 2025/7/13 4:50:16

汽车产业数字化转型：协同创新破解挑战，平衡安全与流通

在数字经济时代的浪潮中，数据资源和数据信息已成为驱动各行各业转型升级的“新石油”。汽车产业，作为国民经济的重要支柱，正经历着前所未有的变革。随着数字化创新和转型的深入，数据在汽车全产业链中的作用和价值日益凸显。在这个…...

编程日记 2025/7/9 20:03:31

Oracle EBS PAC 如何复修非标任务单生产生非常大的PAC成本？

系统环境 RDBMS : 12.1.0.2.0 Oracle Applications : 12.2.6 问题症状非标准任务单组件和装配相同物料A，俗称投入A产A。该物料A的期初数量为0。上期成本假设为20，而本期成本爆增至563.674234。关键问题点：由于该物料没有期初数量，无法通过“更新定期成本”指定“新期本…...

编程日记 2025/7/13 6:53:08

Docker 学习总结（84）—— Docker 常用运维命令

版本与信息查询 docker --version：查看安装的Docker版本。 docker info：获取Docker系统的详细配置信息。镜像管理 docker images：列出本地所有镜像。 docker search IMAGE_NAME：搜索Docker Hub上的镜像。 docker pull IMAGE_NAME[:TAG]：从仓库下载指定镜像。 docker rmi …...

编程日记 2025/7/15 21:01:47

【MySQL】存储过程和触发器

MySQL存储过程和触发器一、存储过程的介绍二、存储过程的相关操作2.1创建存储过程2.2查看存储过程2.4调用存储过程2.5删除存储过程三、变量3.1系统变量3.2用户定义变量3.3局部变量四、存储过程中的关键字4.1 if4.2参数4.3case4.4 while4.5repeat4.6 loop4.7游标4.8条件处理程…...

编程日记 2025/7/13 1:20:22

Flip 动画 <= 60fps

技术栈

已实现功能

用法

安装

配置main.ts|js

指令预览图片

组件预览图片

API 预览图片

相关文章：