求助！关于vue-photo-preview异步图片预览不正常问题

最新推荐文章于 2023-07-10 16:39:02 发布
最新推荐文章于 2023-07-10 16:39:02 发布
阅读量2.1k 收藏
点赞数
文章标签： vue vue图片插件 vue-photo-preview preview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39211165/article/details/89036961
版权

Vue中使用vue-photo-preview异步出现预览不正常问题

异步图片一点击完整的出现一秒，然后马上变黑了，如下图：
在这里插入图片描述一秒后：黑屏
接着再点击一次，效果如下：

在这里插入图片描述
点第三下才恢复正常：
在这里插入图片描述
求助各位大神，是什么原因怎么解决呀！

_pengliang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
图片预览vue-photo-preview
郭宝的博客
04-12 1963
vue-photo-preview它是基于photoswipe的vue图片预览插件。3、然后在img标签中添加preview和preview-text属性即可。preview-text 表示图片描述。2、在main.js中引入该组件。分组，不同组的照片对应的。
基于photoswipe的vue图片预览插件——vue-photo-preview
1004
09-28 912
基于photoswipe的vue图片预览插件 vue-photo-preview 官方文档：https://www.npmjs.com/package/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)
解决vue-photo-preview 异步图片放大失效的问题
10-15
主要介绍了解决vue-photo-preview 异步图片放大失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-photo-preview 异步图片放大失效的解决方法
lizhen_software的博客
02-27 5230
官方提供的异步图片加载的话，在数据加载完之后执行this.$previewRefresh()，但我这里测试的并不好使，最后解决的方式是加transition，代码截图如下： 注意v-if一定要在transtion上加，v-if一定要有，fade的css如下： ...
Photo Sphere Viewer 全景用法记录
weixin_55479342的博客
07-10 949
Photo Sphere Viewer marker简记
解决vue-photo-preview图片点击没反应，无法放大查看问题
那朵花的博客
01-13 2174
方法一：同网上大多数博客写的方法一样，异步请求图片，在数据返回之后加上这个 this.$previewRefresh() 方法二：当多张图片使用方法一不奏效的时候，检查下preview属性，是否是相同的值。preview有重复值，比如v-for遍历多张图片，但是我每张都设置为 :preview="1",这样无论如何点击哪张都没反应。所以我改为不同的值，就OK了！虽然暂时不知道为何分为同一组会出现这种BUG。 ...
总结在使用vue-photo-preview---图片查看大图插件，点击图片无法显示预览等问题
cinoway的博客
06-21 7815
说明前先抛一下官网地址：http://npm.taobao.org/package/vue-photo-preview 1.使用安装 npm install vue-photo-preview --save 2.在main.js配置引用 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/sk...
vue中实现图片预览放大，缩小，旋转等功能，Viewer.js第一次点击图片无法显示(vue使用)
qq_28170105的博客
08-14 1429
代码】vue中实现图片预览放大，缩小，旋转等功能。
VUE的图片预览插件 vue-photo-preview
Amy_cloud的博客
10-18 9742
1.安装： npm install vue-photo-preview --save 2.在main.js 入口文件中配置： import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview) 3.页面渲染： 情况一： 页面本身就存在img标签，且是独立的一个 ：src 对应后台返回的图片路径 pr...
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法
weixin_43717867的博客
09-03 813
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法 前段时间做项目的时候使用了vue-photo-preview图片预览插件，感觉挺好用的，灵活方便,但是最近在页面动态嵌套数据时出现了问题，预览效果消失了，以为是插件的问题，后来才发现了问题所在。 解决办法如上图所示，异步获取数据时要用this.$previewRefresh(); 来刷新重置一下，不然图片预览会失效。 ...
【VUE】基于VUE的图片预览插件 vue-photo-preview
qq_39398332的博客
09-20 7947
使用方法: 1.安装 npm install vue-photo-preview --save 2.在 main.js 中引入配置文件 import vuePicturePreview from 'vue-picture-preview' Vue.use(vuePicturePreview) 3.在根组件App.vue中添加   <lg-preview></lg-p...
vue 图片预览组件
qq_25186543的博客
05-28 4507
vue-photo-preview转自  https://npm.taobao.org/package/vue-photo-preview# 安装 npm install vue-photo-preview --save# 引入 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue....
使用vue-photo-preview图片预览失效解决
weixin_41700532的博客
03-09 1285
安装vue-photo-preview后并在main.js注册，页面中直接使用的时候，有的时候会预览不成功！ 后来发现是因为图片数据是接口返回的，即异步数据，所以只需要在取得数据之后加一句this.$previewRefresh()就可以了！ ...
vue中使用查看大图(vue-photo-preview)
此去经年的博客
09-25 1657
效果图 点击前 点击后 1、介绍 　　基于photoswipe的vue图片预览插件 　　地址https://developer.aliyun.com/mirror/npm/package/vue-photo-preview 　　GitHub: https://github.com/826327700/vue-photo-preview?spm=a2c6h.14275010.0.0.4...
vue watch如何同时监听多个属性
热门推荐
qq_37187917的博客
03-01 3万+
vue watch如何同时监听多个属性 vue watch如何同时监听多个属性 最近在做vue的项目，在使用watch监听属性的时候发现需要同时监听三个属性，作为刚入门的小白，只接触过监听一个属性，上网查找了别人的做法后，找到了解决的方案。 data () { return { name: '', age: '', sex:'' ...
在使用vue-preview遇到的坑。
weixin_42628334的博客
06-20 4677
自学的教程比较老，所以vue-preview的使用方法是错了，就到GitHub上查询，得到这个东西更新了用法。 首先先安装插件 cnpm i vue-preview 在vue全局，也就是main.js声明插件 import VuePreview from 'vue-preview' Vue.use(VuePreview) 在组件里插入 <div class="thumbs">...
vue-photo-preview踩坑，el-table中一张错误图片导致全部图片无法放大，并且与懒加载v-lazy不兼容
weixin_43951592的博客
04-25 1576
需求：el-table中展示的图片，可以点击放大，并且使用懒加载（偶尔会有404的图片路径） 坑一： 一张404图片会导致全部图片无法放大，用@error解决 坑二： 但是马上发现如果用了vue-lazyload，则一定不会触发@error，改用原生img懒加载属性，如下图所示： 完整代码 <el-table-column label="图片" width="100"> <template v-slot="scoped"&gt
vue-preview功能的实现
weixin_38938009的博客
03-30 8610
在移动端项目里面，社区和商城是非常重要的两个模块，社区模块就需要有类似朋友圈的效果展示；最开始了解到了photoswipe 做了一个小图放大图的效果，但是效果并不理想，无法实现多张图片左右滑动的功能，一定是自己忽略了什么问题！！！于是寻求更好的解决方案，后了解到vue-prewview 实现功能；1：webpack.base.conf.js {        test: /vue-preview....
el-image上使用vue-photo-preview
最新发布
12-23
el-image组件是Element UI中的一个图片组件，而vue-photo-preview是一个Vue.js的图片预览插件。在el-image上使用vue-photo-preview可以实现点击图片放大预览的功能。具体的实现步骤如下： 1. 首先，安装vue-photo-preview插件。可以通过npm或者yarn进行安装： ```shell npm install vue-photo-preview --save ``` 2. 在Vue项目的入口文件（一般是main.js）中引入vue-photo-preview插件并注册： ```javascript import Vue from 'vue' import VuePreview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(VuePreview) ``` 3. 在需要使用el-image的组件中，使用vue-photo-preview的指令v-preview来绑定图片的点击事件： ```html <template> <div> <el-image v-preview :src="imageUrl"></el-image> </div> </template> ``` 在上述代码中，v-preview指令会将el-image绑定为可点击放大预览的图片。 4. 在data中定义imageUrl，指定el-image的图片地址： ```javascript export default { data() { return { imageUrl: 'https://example.com/image.jpg' } } } ``` 通过上述步骤，就可以在el-image上使用vue-photo-preview插件实现点击图片放大预览的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_pengliang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值