使用vue-photo-preview图片预览失效解决

最新推荐文章于 2025-05-16 16:09:55 发布
最新推荐文章于 2025-05-16 16:09:55 发布
阅读量1.4k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_41700532/article/details/114578435
本文介绍了解决Vue项目中使用vue-photo-preview组件预览图片不成功的问题。通过在获取图片数据后调用this.$previewRefresh()方法，确保异步加载的图片能够正确显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

安装vue-photo-preview后并在main.js注册，页面中直接使用的时候，有的时候会预览不成功！

后来发现是因为图片数据是接口返回的，即异步数据，所以只需要在取得数据之后加一句this.$previewRefresh()就可以了！

Vue3 - 详细实现图片预览功能，点击图像、按钮事件触发图像预览效果，支持单个图片或多个图片轮播切换预览，类似相册预览效果，图片查看器功能（图片可旋转翻转、滚轮放大缩小、拖曳拖拽图片、修改遮罩背景色
资深程序员
02-23 4274
vue3，图片预览，图像预览，vue3预览图片，vue3预览图像，vue3相册预览，图片查看器功能，预览图片，怎么预览多个图片并且可以切换，vue3最好用的图片预览插件，vue3网站pc好用的图片预览插件，vue3实现图片预览组件，vue3项目实现预览图片、旋转图片功能，vue3中使用viewerjs实现图片预览效果，vue3电脑网页怎么预览图片图像，图片预览组件，vue3项目中如何实现图片组预览查看，弹框放大显示图片并居中预览，在Vue3项目中实现图片的在线预览，实现通过点击按钮来触发图片预览功能，在vu
uniapp uview文件上传的文件不是文件流，该如何处理？用了uni.chooseImage预览功能要如何做
Allen-Ye博客
08-02 2633
uniapp uview文件上传的文件不是文件流，该如何处理？用了uni.chooseImage预览功能要如何做
解决vue-photo-preview 异步图片放大失效的问题
10-15
主要介绍了解决vue-photo-preview 异步图片放大失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法
weixin_43717867的博客
09-03 895
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法 前段时间做项目的时候使用了vue-photo-preview图片预览插件，感觉挺好用的，灵活方便,但是最近在页面动态嵌套数据时出现了问题，预览效果消失了，以为是插件的问题，后来才发现了问题所在。 解决办法如上图所示，异步获取数据时要用this.$previewRefresh(); 来刷新重置一下，不然图片预览会失效。 ...
Vue-Office项目中Excel图片预览问题的分析与解决
gitblog_07196的博客
05-16 399
Vue-Office项目中Excel图片预览问题的分析与解决 问题背景 在使用Vue-Office处理Excel文件时，开发者遇到了图片无法正常预览的问题。具体表现为某些xlsx格式文件中的图片无法显示，通过调试发现renderImage方法中调用的calcPosition方法返回的width和height值为NaN。 问题分析 1. 原始问题现象 在分析karingbee咖啡机选品竞品分析的Ex...
解决vue-photo-preview图片点击没反应，无法放大查看问题
那朵花的博客
01-13 2432
方法一：同网上大多数博客写的方法一样，异步请求图片，在数据返回之后加上这个 this.$previewRefresh() 方法二：当多张图片使用方法一不奏效的时候，检查下preview属性，是否是相同的值。preview有重复值，比如v-for遍历多张图片，但是我每张都设置为 :preview="1",这样无论如何点击哪张都没反应。所以我改为不同的值，就OK了！虽然暂时不知道为何分为同一组会出现这种BUG。 ...
总结在使用vue-photo-preview---图片查看大图插件，点击图片无法显示预览等问题
cinoway的博客
06-21 7957
说明前先抛一下官网地址：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-preview实现缩略图踩坑记录：Property or method “$preview“ is not defined 用不了、无法修改图片样式
H_xiang_xiang的博客
06-26 882
基本配置 1、下载 npm i vue-preview -S　 2、在index.js中引入并安装 import VuePreview from'vue-preview' Vue.use(VuePreview) 3、 如果是按照早几年的视频教学方法，会在页面中引入以下标签 <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index,
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
vue-photo-preview图片预览失效问题记录
05-30 6036
<img class="pic" v-for="(item,index) of imgList" :key="index" :src="item.smallFileName" :large="item.fileName" preview="0" preview-text="症状图片" > imgList是异步获取数据的时候在获取...
Vue viewer 下通循环获取的图片无法预览问题
Mr-k的博客
07-11 335
出现该问题的原因是，当你viewer下出现了新的 img标签时，但viewer并不能够及时的去将该图片放到viewer的方法中处理,为了保持 viewer 对标签内的 img 的保持灵敏，通过该属性即可。即可,该属性是viewer提供的。只需要在viewer上添加。
preview图片预览失效
m0_67021283的博客
06-21 1441
1. 正常使用preview图片组件预览图片，点击图片无效。但是在table表格外面写一个img标签可以正常预览。说明动态获取数据时出现问题。2.解决办法，获取table表格数据后异步刷新一下。异步刷新数据，否则无法预览。
vue-photo-preview踩坑，el-table中一张错误图片导致全部图片无法放大，并且与懒加载v-lazy不兼容
weixin_43951592的博客
04-25 1654
需求：el-table中展示的图片，可以点击放大，并且使用懒加载（偶尔会有404的图片路径） 坑一： 一张404图片会导致全部图片无法放大，用@error解决 坑二： 但是马上发现如果用了vue-lazyload，则一定不会触发@error，改用原生img懒加载属性，如下图所示： 完整代码 <el-table-column label="图片" width="100"> <template v-slot="scoped"&gt
VUE的图片预览插件 vue-photo-preview
Amy_cloud的博客
10-18 9936
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-previe插件,图片需要刷新才能分组预览的问题
LzzMandy的博客
03-18 617
问题描述： 图片预览功能包含在一个通用组件中，循环这个组件，图片无法预览，需要刷新才可以。
vue-picture-preview 常见问题解决方案
gitblog_09395的博客
09-13 497
vue-picture-preview 常见问题解决方案 项目基础介绍 vue-picture-preview 是一个基于 Vue.js 的图片预览插件，适用于移动端和 PC 端。它基于 PhotoSwipe 实现，提供了友好的图片文件预览功能。该项目的主要编程语言是 JavaScript，使用了 Vue.js 框架。 新手使用注意事项及解决方案 1. 安装问题 问题描述：新手在安装 vue-pi...
uview Popup 弹出层嵌套使用Upload 上传图片预览问题层级问题解决。
zhangbin0103的专栏
05-31 903
uview Popup 弹出层嵌套使用Upload 上传图片预览问题层级问题解决。由于Popup 弹出层x-index层级较高，所以预览在弹出层下面。
使用uniapp和uview上传图片，预览和删除都可以
热门推荐
mk黑足的博客
10-19 1万+
之前写过一个使用uniapp和uview上传图片功能，项目测试时用的那个，是可以上传成功的，但是有点问题，代码优化后把现在的贴出来，感觉比之前那个好用 上传组件，是在插件市场下载的，根据自己需求改了改 <template> <view class="imglistbx"> <view :class="['imglistItem',columnNum==3?'column3':'column4']" v-for="(item,index) in showList"
el-image中本地图片路径属性
最新发布
06-25
###注意事项：-使用相对路径时，如果图片放在`src/assets`目录，推荐使用`require`，因为相对路径可能会因文件位置变化而失效，而`require`是相对于当前文件路径。-使用绝对路径时，图片必须放在public目录（或静态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值