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

最新推荐文章于 2025-11-07 11:24:58 发布
原创 最新推荐文章于 2025-11-07 11:24:58 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了解决Vue项目中使用vue-photo-preview组件预览图片不成功的问题。通过在获取图片数据后调用this.$previewRefresh()方法，确保异步加载的图片能够正确显示。

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

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

vue-photo-preview踩坑，el-table中一张错误图片导致全部图片无法放大，并且与懒加载v-lazy不兼容
weixin_43951592的博客
04-25 1696
需求：el-table中展示的图片，可以点击放大，并且使用懒加载（偶尔会有404的图片路径） 坑一： 一张404图片会导致全部图片无法放大，用@error解决 坑二： 但是马上发现如果用了vue-lazyload，则一定不会触发@error，改用原生img懒加载属性，如下图所示： 完整代码 <el-table-column label="图片" width="100"> <template v-slot="scoped"&gt
vue-preview实现缩略图踩坑记录：Property or method “$preview“ is not defined 用不了、无法修改图片样式
H_xiang_xiang的博客
06-26 926
基本配置 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-photo-preview 异步图片放大失效的解决方法
lizhen_software的博客
02-27 5335
官方提供的异步图片加载的话，在数据加载完之后执行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 785
通过这次实践，发现用 AI 平台开发这类标准功能确实高效。需求描述越具体，生成的代码越精准生成后建议先检查依赖版本，必要时更新到最新多利用平台的实时预览功能边改边看部署前在本地测试下不同尺寸设备的显示效果如果你们也需要快速实现图片预览功能，不妨试试InsCode(快马)平台。从生成代码到上线演示，整个过程流畅得让人惊喜，特别适合需要快速验证想法的场景。
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法
weixin_43717867的博客
09-03 929
vue图片预览插件（vue-photo-preview）动态获取数据时失效问题的解决办法 前段时间做项目的时候使用了vue-photo-preview图片预览插件，感觉挺好用的，灵活方便,但是最近在页面动态嵌套数据时出现了问题，预览效果消失了，以为是插件的问题，后来才发现了问题所在。 解决办法如上图所示，异步获取数据时要用this.$previewRefresh(); 来刷新重置一下，不然图片预览会失效。 ...
解决vue-photo-preview图片点击没反应，无法放大查看问题
那朵花的博客
01-13 2489
方法一：同网上大多数博客写的方法一样，异步请求图片，在数据返回之后加上这个 this.$previewRefresh() 方法二：当多张图片使用方法一不奏效的时候，检查下preview属性，是否是相同的值。preview有重复值，比如v-for遍历多张图片，但是我每张都设置为 :preview="1",这样无论如何点击哪张都没反应。所以我改为不同的值，就OK了！虽然暂时不知道为何分为同一组会出现这种BUG。 ...
解决vue打包之后静态资源图片失效的问题
08-28
解决 Vue 打包之后静态资源图片失效的问题 在 Vue 项目中， 经常会遇到一个问题，即在打包之后静态资源图片失效的问题。这种问题可能会导致图片无法显示，控制台中提示某个图片没有找到（404 错误）。这种问题的...
总结在使用vue-photo-preview---图片查看大图插件，点击图片无法显示预览等问题
cinoway的博客
06-21 8049
说明前先抛一下官网地址：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-photo-preview图片预览失效问题记录
05-30 6067
<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 368
出现该问题的原因是，当你viewer下出现了新的 img标签时，但viewer并不能够及时的去将该图片放到viewer的方法中处理,为了保持 viewer 对标签内的 img 的保持灵敏，通过该属性即可。即可,该属性是viewer提供的。只需要在viewer上添加。
preview图片预览失效
m0_67021283的博客
06-21 1507
1. 正常使用preview图片组件预览图片，点击图片无效。但是在table表格外面写一个img标签可以正常预览。说明动态获取数据时出现问题。2.解决办法，获取table表格数据后异步刷新一下。异步刷新数据，否则无法预览。
VUE的图片预览插件 vue-photo-preview
Amy_cloud的博客
10-18 9974
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 656
问题描述： 图片预览功能包含在一个通用组件中，循环这个组件，图片无法预览，需要刷新才可以。
vue-picture-preview 常见问题解决方案
gitblog_09395的博客
09-13 545
vue-picture-preview 常见问题解决方案 项目基础介绍 vue-picture-preview 是一个基于 Vue.js 的图片预览插件，适用于移动端和 PC 端。它基于 PhotoSwipe 实现，提供了友好的图片文件预览功能。该项目的主要编程语言是 JavaScript，使用了 Vue.js 框架。 新手使用注意事项及解决方案 1. 安装问题 问题描述：新手在安装 vue-pi...
uview Popup 弹出层嵌套使用Upload 上传图片预览问题层级问题解决。
zhangbin0103的专栏
05-31 990
uview Popup 弹出层嵌套使用Upload 上传图片预览问题层级问题解决。由于Popup 弹出层x-index层级较高，所以预览在弹出层下面。
25-vue-photo-preview的使用及使用过程中的问题解决方案
weixin_46675693的博客
07-31 522
正常插件安装之后会有一个types目录，下面有.d.ts的声明文件，但是vue-photo-preview这个包没有，所以提示了这个错误（但是不影响插件的使用）前提条件：在整理预览工具的过程中遇到vue-photo-preview这个插件库，是用于预览图片的，好像没有用过，所以就花了点时间玩了一下。是因为使用了v-if后，图片可能在插件初始化后才渲染到 DOM，所以图片没有和预览进行绑定，可以使用以下方式解决。是 PhotoSwipe 自动为可预览图片生成的唯一标识，用于在预览时定位对应的图片。
使用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"
Vue图片预览插件：vue-photo-preview全平台适用
在Vue.js中，vue-photo-preview作为一个图片预览插件，是以Vue组件的形式存在的。要使用该插件，开发者需要按照Vue组件的使用规则将其集成到项目中。这通常涉及以下几个步骤： - **组件引入**：将vue-photo-preview...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值