vue-photo-preview图片预览失效怎么办？如何修复vue图片预览插件问题？

本文共计652个文字，预计阅读时间需要3分钟。

目录 + Vue Photo Preview 图像预览失效 + Vue Photo Preview 图像预览使用 + 应用场景 + 选择 + 使用 + 注意 + Vue Photo Preview 图像预览失效 + img class=pic v-for=(item, index) in imgList :key=index :src=item.smallFileName +

目录

• vue-photo-preview图片预览失效
• 图片预览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配置项，见：photoswipe.com/documentation/options.html

2、若img标签使用的是异步图片数据，需要在加载数据之后，加一句：

this.$previewRefresh();

这样刷新之后，vue-photo-preview预览效果才起效

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。