vue-lazyload和v-viewer冲突问题

vue2使用v-viewer实现图片预览 在Vue.js 2中使用v-viewer插件实现图片预览功能相对简单。v-viewer是一个Vue.js的图片预览插件,可以轻松实现图片的放大、缩小和滑动预览等功能。中文文档:Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作 | Mirari’s Blog。在上面的代码中,我们将 v-viewer 指令应用在 img 标签上,这样点击图片时会触发预览效果。用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,基于viewer.js。 阅读详情
  1. 测试环境和生产环境都无问题(都是build后的代码)
  2. vue-lazyload是vue的懒加载插件,v-viewer是个图片的预览插件,版本分别是1.3.1和1.4.2,存在一个问题就是懒加载插件正常执行,但是预览插件在初次加载后图片点击失效,只有页面强制重排后才会再次生效;
  3. 目前根据源码定位后发现是懒加载插件v-lazy中的add,update中影响了预览插件中对于图片的默认初始,导致预览插件的点击预览失效;
    正常监听img的对象
    这是用v-viewer指令进行,可以看到有对应的img数据,完成初始的img数据点击预览监听

这是组件的形式监听img数据
这个是通过viewer组件的形式进行引入,但是在初始页面的时候,由于v-lazy的图片懒加载的图片影响,在对图片进行预览时间监听的时候img的dom还没加载,导致监听失败,从而无法点击

  1. 本地解决方式,因为v-lazy替代了之前的src属性,所以测试结果是两者兼具,可以保证懒加载和预览插件正常执行(同样也有最原始的方法,换插件哈哈。。。(▽)。。。);
  2. 同样,可以通过指令v-viewer的形式进行引入,加载需要预览的图片父级上,通过指令的形式,直接进行dom处理;
  3. 如果哪位遇到同样问题,如有别的解决方法可留言回复。
Vue项目实战常见问题与优化方案 Vue作为主流前端框架,其响应式原理基于ES6的Proxy实现数据绑定,通过虚拟DOM技术优化渲染性能。在工程实践中,合理使用Pinia状态管理和Vue Router路由配置能显著提升开发效率。针对企业级应用场景,需要特别关注动态路由持久化、组件性能优化等关键技术点。本文结合Vue 3组合式API和TypeScript类型系统,详细解析了动态class绑定、插槽通信等高频问题的解决方案,并提供了经过生产验证的代码示例。 阅读详情

相关推荐

UE5实战:如何用Georeference插件搞定百度地图坐标转换(附完整代码)

本文详细解析了在UE5中使用Georeference插件实现百度地图坐标转换的全流程,包括BD-09到UE内部坐标的转换算法、UTM投影配置及性能优化技巧。通过完整代码示例和实战案例,帮助开发者高效解决数字孪生项目中的地理坐标转换难题。

weixin_30955617的博客 94

vue3使用viewer

整理vue3+ts项目使用v-viewer过程,以及viewer的method、option、event整理

weixin_44364294的博客 1万+

港口集装箱码头运营FlexSim仿真

列队4中的集装箱会根据不同类型的集装箱会放置在不同的堆场,因此根据前面对集装箱设置的标签Type的数值不同,设置不同的发送端口。集装箱到达列队3后,会有70%的集装箱到达堆场,30%的集装箱运出港口,因此在Queue列队3的Flow界面设置按照百分比发送端口,其中70%发送到端口1,即发送到列队4等待进入堆场,30%发送到端口2,即发送至出闸口。通过上述对比表格可以看出,当集卡数量在10的时候,岸桥和场桥的设备利用率达到了最高,当集卡数量为12的时候场桥1和场桥3的利用率有所下降,因此综合考虑。

m0_72514516的博客 1331

vue预览图片 v-viewer

效果 1、安装依赖 npm install v-viewer --save 2、全局引入 import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar'

weixin_44955769的博客 1344

FlowPic实战:从流量到图像的端到端加密应用识别

本文深入解析了FlowPic技术如何将网络流量转化为图像,并利用CNN模型进行端到端加密应用识别。该方法通过分析数据包大小和时序信息生成流量图像,有效绕过加密内容,实现对视频、聊天、文件传输等应用的精准分类。文章提供了从流量抓取、图像生成到轻量级CNN模型设计与训练的完整实战指南,并探讨了在VPN、Tor等复杂场景下的应用与挑战。

weixin_29046035的博客 150

在Windows 11上用VirtualBox搞定WRF-Hydro 5.2.0:一个水文模型小白的Ubuntu 22.04虚拟机避坑实录

本文详细记录了在Windows 11上使用VirtualBox和Ubuntu 22.04虚拟机成功编译安装WRF-Hydro 5.2.0水文模型的全过程。从虚拟环境配置、依赖库安装到环境变量设置,作者分享了针对Linux新手的实用避坑技巧和关键命令,帮助科研人员高效完成水文模型的环境搭建。

weixin_30733003的博客 352

Vue - 图片浏览组件v-viewer

vue查看图片插件使用

weixin_69811594的博客 772

保姆级避坑指南:在Ubuntu 18.04上搞定速腾Helios雷达驱动与fast-LIO2的完整配置流程

本文提供了一份详细的速腾Helios雷达与fast-LIO2在Ubuntu 18.04上的配置避坑指南,涵盖驱动安装、数据格式转换到建图全流程。特别针对常见编译错误和数据转换问题提供了解决方案,帮助开发者高效完成环境搭建与建图任务。

weixin_27252001的博客 112

低版本vue2(2.6.10)使用v-viewer的踩坑之路

再下载v-viewer@1.6.4。先下载viewjs@1.10.1。

qq_36707926的博客 2245

FPGA波束形成:从算法到硬件的艺术之旅

本文深入探讨了FPGA在波束形成技术中的应用,从算法原理到Verilog硬件实现的全过程。文章详细分析了FPGA并行处理、低延迟和可重构特性如何优化波束形成系统性能,并提供了Verilog关键模块代码示例和资源优化策略,为工程师实现高效FPGA波束形成解决方案提供实用指导。

tea88的博客 1044

pytorch gpu运行安装重点(CUDA12.3)

pytorch gpu加速

weixin_45597212的博客 3万+

基于vue的v-viewer点击预览图片插件

基于vue的v-viewer点击预览图片插件

吴秋华的CSDN 941

Python爬虫实战:逆向工程与异步爬虫技术,高效抓取国家知识产权局专利数据

相比于传统的Selenium,Playwright由微软开发,支持多浏览器(Chromium, Firefox, WebKit),API更现代,执行速度更快,并且能轻松录制用户操作生成代码。通常,列表中的摘要信息是缩略的,我们需要进入每个专利的详情页获取完整信息(如主权要求、法律状态等)。我们的第一步是手动操作一遍搜索流程,并用Playwright的“录制”功能或开发者工具,找出真正返回专利数据的那一个或多个网络请求。以友好的、对人类行为模拟的方式爬取数据是基本的网络礼仪,也能有效避免你的IP被封锁。

2201_76125261的博客 2418

Vue使用v-viewer,显示缩略图点击打开原图

Vue使用v-viewer,显示缩略图点击打开原图 安装v-viewer npm install v-viewer --save 在main.js当中加入以下代码 // 我当前用的v-viewer版本1.5.1 // 在main.js里设置的话,可以在全局使用 import Viewer from "v-viewer"; import "viewerjs/dist/viewer.css"; Viewer.setDefaults({ url: "data-source",// 大图地址参数 filt

weixin_45774919的博客 1442

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Vue项目图片预览v-viewer插件使用

v-viewer 是一个基于 Vue.js 的图片查看器组件,它允许你在项目中轻松地实现图片的查看和放大功能。在项目中使用 v-viewer 非常简单,下面是一个详细的介绍和如何在项目中使用的示例。通过以上步骤,你就可以在你的 Vue 项目中使用 v-viewer 来实现图片查看的功能。然后,在模板中,我们展示了单个图片和一个图片集合,当用户点击图片时,调用。组件被用作容器来包裹图片元素,这样就可以在图片上启用图片查看器功能。3.1 一旦你安装并配置了 v-viewer,你可以在你的组件中使用。

xxx割喉的博客 4394

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

使用v-viewer的步骤以及遇到的问题

介绍 v-viewer是基于viewer.js的插件,用于Vue中进行图像查看的组件 使用 通常我们在idea中使用的话,直接通过在命令台中输入 npm install v-viewer或者是npm install --save v-viewer 就能下载该插件(不出意外的情况下) 引入该插件 全局引入 //图片引入的浏览器插件 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' //引入图片浏览插件 Vue.use(Viewe

weixin_44353972的博客 6523

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

v-lazy 和 viewer.js 组合使用时,预览图失效问题解决方案

v-lazy 和 viewer.js 一起使用时,预览图失效的解决方案

优快云前端知识共享 567

前端插件v-viewer图像插件

简介:一款基于 viewer.js 封装的Vue版插件,可用于图像查看,以及图片的旋转、缩放等功能预览。插件的安装:该插件使用方式有:指令形式、组件形式(以下介绍组件形式)

greencaiji的博客 4163

vue中的 v-viewer+懒加载+属性修改

安装配置 npm install v-viewer --save v-viewer库 npm install vue-lazyload --save-dev 懒加载 <template> <div id="app"> <viewer :images="images"> <img v-for="src ...

射手男很懒的博客 3288

vue viewer实现图片懒加载简单方式

vue viewer实现图片懒加载简单方式

qq769298218的博客 509

vue图片预览插件v-viewer使用及问题解决

【代码】vue图片预览插件v-viewer使用及问题解决。

syjinguna的博客 1349

Vue使用v-viewer插件实现图片预览和缩放和旋转等功能

昨天不是做了一个动态的图片展示吗,今天就寻思着能不能完善下功能,可以通过点击图片的方式进行放大缩小,甚至旋转。Vue显示图片的几种方式然后我一顿收搜,发现了vue中有这么一款插件:v-viewerwc,不看不知道,一看吓一跳,这个插件居然如此nb,最主要的是,这么厉害的插件,使用其他特别简单!先给大家简单科普下v-viewe这个插件吧这个插件我觉得太厉害了,最主要是使用起来也很简单。大家一定要下去试试!

见证自己学习,成长的记录 5028

Vue 图片查看器 v-viewer:全方位视觉控制组件

**v-viewer** 是一个专为 Vue.js(特别是 Vue 2.x 版本)设计的图像查看器组件,基于强大的 **viewer.js** 实现。此项目采用 JavaScript 编写,兼容 TypeScript,为前端开发者提供了一种高效且直观的方式来展示图片,并执行旋转、缩放、平移等交互操作。其简洁的设计和丰富的功能使其成为处理图像展示场景的理想选择。 ## 核心功能 - **多样的图像...

gitblog_09489的博客 742

vue 使用 v-viewer 用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,基于viewer.js。

vue 中 v-viewer 的简单使用

努力 2119

4-关于使用v-viewer过程中的一些报错处理

过程:首先查了有哪个能直接预览图片的工具,找到了v-viewer这个,第一步就是安装。准备好图片后发现点了没反应,结果是还少了一个依赖包viewerjs,继续下载。文件中检查,还真有一个,修改会原来的版本后,重新启动,运行成功。或其他依赖配置文件中有一个不正确的版本指定,即。我就纳闷,我什么时候有这么一个版本了,然后我去。估计是版本不适配,又找到了另一个版本尝试下载。这个报错还是一个版本的问题,我又换了个版本。结果又报了一个错,大概的意思是我的。终端是不报错了,但是控制台报错了。

weixin_46675693的博客 1130
上一篇: H5调用手机的前后摄像头,canvas显示,自带截图,兼容ios和android
下一篇: mac M1 nvm 安装问
殇蓝
博客等级 码龄10年 31粉丝 25原创
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值