vue-photo-preview 异步图片放大失效的解决方法

最新推荐文章于 2024-02-27 16:12:30 发布
原创 最新推荐文章于 2024-02-27 16:12:30 发布 · 置顶 · 5.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

官方异步图片加载完成后，使用this.$previewRefresh()效果不佳。本文介绍了一种通过添加Transition和v-if来解决图片加载刷新问题的方法，确保图片加载后平滑过渡。

官方提供的异步图片加载的话，在数据加载完之后执行this.$previewRefresh()，但我这里测试的并不好使，最后解决的方式是加transition，代码截图如下：

注意v-if一定要在transtion上加，v-if一定要有，fade的css如下：

解决vue-photo-preview 异步图片放大失效的问题
10-15
主要介绍了解决vue-photo-preview 异步图片放大失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用快马 AI 一键生成 Vue 图片预览应用：vue-photo-preview 实战
YellowSun24的博客
11-07 805
通过这次实践，发现用 AI 平台开发这类标准功能确实高效。需求描述越具体，生成的代码越精准生成后建议先检查依赖版本，必要时更新到最新多利用平台的实时预览功能边改边看部署前在本地测试下不同尺寸设备的显示效果如果你们也需要快速实现图片预览功能，不妨试试InsCode(快马)平台。从生成代码到上线演示，整个过程流畅得让人惊喜，特别适合需要快速验证想法的场景。
vue 实现预览图片
。
08-03 3941
vue 简单实现图片的放大预览
求助！关于vue-photo-preview异步图片预览不正常问题
qq_39211165的博客
04-04 2233
Vue中使用vue-photo-preview异步出现预览不正常问题 异步图片一点击完整的出现一秒，然后马上变黑了，如下图： 一秒后： 接着再点击一次，效果如下： 点第三下才恢复正常： 求助各位大神，是什么原因怎么解决呀！ ...
解决vue-photo-preview图片点击没反应，无法放大查看问题
那朵花的博客
01-13 2495
方法一：同网上大多数博客写的方法一样，异步请求图片，在数据返回之后加上这个 this.$previewRefresh() 方法二：当多张图片使用方法一不奏效的时候，检查下preview属性，是否是相同的值。preview有重复值，比如v-for遍历多张图片，但是我每张都设置为 :preview="1",这样无论如何点击哪张都没反应。所以我改为不同的值，就OK了！虽然暂时不知道为何分为同一组会出现这种BUG。 ...
vue-photo-preview读接口图片 分组失效
最新发布
12-26
我们正在解决vue-photo-preview插件在读取接口图片时分组失效的问题。根据引用内容，我们可以总结出以下关键点： 1. 当动态获取数据（异步加载图片）时，预览效果可能会消失，需要使用`this.$previewRefresh()`来...
Vue项目开发常见问题和解决方案总结
10-14
另一个可能出现的问题是使用vue-photo-preview库进行图片预览时，图片预览可能失效。这通常发生在异步获取数据后。为了解决这个问题，需要在数据加载完成后调用`this.$previewRefresh()`方法来刷新预览组件。确保`v-...
<el-dialog v-model="localDialogVisible" width="800" @close="handleClose" destroy-on-close v-if="isList"> <template #header> <div class="my-header"> <span>图片标题</span> </div> </template> <el-divider style="margin: 0"></el-divider> <div class="photoBox"> <img class="img1" src="@/assets/onlineWork/arrow-left.png" alt="" @click="prevImage" /> <el-image class="img2" :src="imageUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[imageUrl]" show-progress :initial-index="4" fit="contain" /> <img class="img3" src="@/assets/onlineWork/arrow-right.png" alt="" @click="nextImage" /> </div> <template #footer> <el-divider style="margin: 0; width: 100%; position: absolute; right: 0"></el-divider> <div class="carousel"> <!-- 轮播图容器 --> <div class="carousel-container" ref="carouselContainer"> <div class="carousel-wrapper" v-for="(item, index) in imageList" :key="index"> <el-image style="width: 100px; height: 100px" @click="checkImage(index)" :src="item.url" fit="contain" :class="{ selectBorder: activeIndex === index }" /> </div> </div> </div> </template> </el-dialog> 我希望下面的图片列表可以将展示的imageUrl的对应的imageList[activateIndex]进行居中，
05-24
要在 Vue 中使用 Element Plus 的 `el-dialog` 组件并确保点击图片列表后，对应的 `imageList[activeIndex]` 在轮播图中自动居中展示，可以按照以下方法实现。 #### 数据绑定与状态管理 通过维护一个响应式的变量来...
VUE中遇到的问题
Wudide_xiaobai的博客
05-18 740
1.有时数据改变不刷新解决方法 this.$previewRefresh();
preview图片预览失效
m0_67021283的博客
06-21 1511
1. 正常使用preview图片组件预览图片，点击图片无效。但是在table表格外面写一个img标签可以正常预览。说明动态获取数据时出现问题。2.解决办法，获取table表格数据后异步刷新一下。异步刷新数据，否则无法预览。
vue h5端实现富文本图片预览（基于 Vant 的 ImagePreview 组件）
我总是词不达意的博客
05-25 3414
vue h5端实现富文本图片预览（基于 Vant 的 ImagePreview 组件）
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法
weixin_43717867的博客
09-03 931
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法 前段时间做项目的时候使用了vue-photo-preview图片预览插件，感觉挺好用的，灵活方便,但是最近在页面动态嵌套数据时出现了问题，预览效果消失了，以为是插件的问题，后来才发现了问题所在。 解决办法如上图所示，异步获取数据时要用this.$previewRefresh(); 来刷新重置一下，不然图片预览会失效。 ...
Vue中使用vue-photo-preview实现图片放大、分组查看并且遍历动态加载的所有图片，添加自定义属性（2021年更新）
坚果程序开发存档博客专栏
07-29 6883
1、安装vue-photo-preview npm install vue-photo-preview --save 2、注册和配置 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' ​ let options = { fullscreenEl: false, } Vue.use(preview, options) Vue.use(preview) 3、在img标签中添加
vue 查看大图插件 vue-photo-preview
未末的博客
12-09 1658
图片小图的状态太过模糊，所以需要一个放大查看的工具，vue-photo-preview试了一下很好用 使用方法： 1.安装： npm install vue-photo-preview --save 2.使用： 首先在main.js中引入 import preview from 'vue-photo-preview'; import 'vue-photo-preview/dist/skin.css'; Vue.use(preview); 然后直接使用 <img :src="areaMajorArt
TypeError: this.$message is not a function报错情况解决
weixin_45717984的博客
05-17 1万+
TypeError: this.$message is not a function报错情况解决
解决：this.$refs引用子组件报错 is not a function
热门推荐
草巾冒小子的博客
11-13 3万+
解决this.$refs引用子组件出现undefined或者is not a function的错误。
Vue2-(jeecgBoot) img大图预览
Yolanda的专栏
02-27 1075
img 图片展示，大图预览失效解决，代码中使用的预览组件为：vue-photo-preview。使用场景：详情页面-model.images循环展示，点击查看大图，不能点击。在详情数据请求完毕加 this.$previewRefresh();
使用vue-photo-preview图片预览失效解决
weixin_41700532的博客
03-09 1467
安装vue-photo-preview后并在main.js注册，页面中直接使用的时候，有的时候会预览不成功！ 后来发现是因为图片数据是接口返回的，即异步数据，所以只需要在取得数据之后加一句this.$previewRefresh()就可以了！ ...
Vue图片预览插件：vue-photo-preview全平台适用
在Vue.js中，vue-photo-preview作为一个图片预览插件，是以Vue组件的形式存在的。要使用该插件，开发者需要按照Vue组件的使用规则将其集成到项目中。这通常涉及以下几个步骤： - **组件引入**：将vue-photo-preview...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值