vue-photo-preview图片预览失效的问题及解决
更新时间：2022年09月01日 15:49:05 作者：喜大普奔⁶⁶⁶
这篇文章主要介绍了vue-photo-preview图片预览失效的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue-photo-preview图片预览失效
<img
class="pic"
v-for="(item,index) of imgList"
:key="index"
:src="item.smallFileName"
:large="item.fileName"
preview="0"
preview-text="症状图片"
>
imgList是异步获取数据的时候在获取数据后需要调用this.$previewRefresh();刷新重置一下，否则~~不生效
图片预览vue-photo-preview的使用
应用场景
点击图片，能够以类似朋友圈的方式展示图片，主要功能：预览，放大。
选择
经过网上一番查阅，有三款插件比较不错，分别是 viewerjs、vue-photo-preview 以及 vue-picture-preview。经过简单比较，viewerjs 功能比较强大，更适合web端。vue-picture-preview 只有预览和切换上下张功能，无法满足全部需求。故优先选择vue-photo-preview。
使用
1、安装
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 src="xxx.jpg" large="xxx_2x.jpg" preview="1" preview-text="描述">
preview值相同为同组图片。preview-text为预览时下方描述文字。 img的src默认为缩略图，如不填写large，则展示src。若有large，则显示large大图。
注意
1、上面为简单使用，option其实还有更多可配置项，例如：
let options = {
fullscreenEl: false, //控制是否显示右上角全屏按钮
closeEl: false, //控制是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //控制是否显示分享按钮
zoomEl: false, //控制是否显示放大缩小按钮
counterEl: false, //控制是否显示左上角图片数量按钮
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true, //点击图片应关闭图库，仅当图像小于视口的大小时
indexIndicatorSep: ' / '//图片数量的分隔符
}更多option配置项，见：https://photoswipe.com/documentation/options.html
2、若img标签使用的是异步图片数据，需要在加载数据之后，加一句：
this.$previewRefresh();
这样刷新之后，vue-photo-preview预览效果才起效
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3中echarts的tooltip组件不显示问题及解决
这篇文章主要介绍了vue3中echarts的tooltip组件不显示问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue密码登陆加密RSA实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了Vue之解决Echarts组件使用ID不能复用的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue-element-admin平台侧边栏收缩控制问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue Cli 环境删除与重装教程 - 版本文档，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
解决vue-cli webpack打包开启Gzip 报错问题
这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要给大家介绍了关于怎么安装离线vue环境的相关资料,由于公司要求在内网开发项目,而内网不能连接外网,因此只能离线安装vue环境,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了vue格式化时间过滤器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了Vue的三种路由模式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
为了让一些不太清楚搭建前端项目的小白,更快上手,下面这篇文章主要给大家介绍了关于安装node.js以及搭建vue项目过程中遇到问题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论