问题描述：
想在vue项目中使用vue-awesome-swiper实现相册查看功能，测试的时候发现使用写死的图片src 时手势缩放没有问题，但是图片src集合换到从后台获取到再赋值的，手势缩放就不起作用了，不知道是什么原因。
用的vue template,
后台获取到的数据已经渲染到dom中，手机上测试切换没有问题，双击放大也可以，就是手势缩放或者双击放大后图片不能拖拽移动查看（用写死的图片src是可以的）。
vue项目依赖或版本：
"devDependencies": {
"axios": "^0.15.3",
"babel-plugin-component": "^0.10.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "^0.12.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"lodash": "^4.17.4",
"postcss-px2rem": "^0.3.0",
"vue-lazyload": "^1.2.6"
},
"dependencies": {
"fastclick": "^1.0.6",
"leancloud-realtime": "^4.0.0-alpha.3",
"leancloud-realtime-plugin-typed-messages": "^3.0.0",
"leancloud-storage": "^3.4.2",
"mint-ui": "^2.2.11",
"moment": "^2.19.1",
"vee-validate": "^2.0.0",
"vue": "^2.5.13",
"vue-awesome-swiper": "^2.6.7",
"vue-resource": "^1.3.4",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
}
问题出现的环境背景及自己尝试过哪些方法：
试过使用另一个图片预览插件 PhotoSwipe：PhotoSwipe，这个插件体验感比较好，但是插件需要预先知道图片的宽高，这个目前还没有时间研究。
相关代码：
<style>
.viewImg .swiper-slide img {
width: 100%;
}
</style>
<template>
<div class="viewImg" >
<a class="btn-close f-r"><img src="/images/icon-close.png" @click="closeViewer" alt="关闭" title="关闭"></a>
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="img in images" :key="img.id">
<div class="swiper-zoom-container">
<img :data-src="img.smallSizeUrl" class="swiper-lazy">
</div>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css' ;
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
},
data() {
return {swiperOption: {
allowTouchMove: true,
width: window.innerWidth,
notNextTick: false,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
loadPrevNext: true,
lazy: {
loadPrevNext: true,
},
lazyLoading : true,
lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）。
zoom: true,
grabCursor: true, // 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
pagination: {
el: '.swiper-pagination'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
//定义这个sweiper对象
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
mounted () {
//这边就可以使用swiper这个对象去使用swiper官网中的那些方法
// this.swiper.slideTo(0, 1, false);
},
props: {
images: {
required: true
}
},
methods:{
closeViewer: function(){
this.viewImg = false;
}
}
}
</script>
我期待的结果是什么？实际看到的错误信息又是什么：
需要实现流畅的相册查看功能，支持预加载、流畅切换以及手机中手势缩放查看。
vue-awesome-swiper 的demo里可以看到都可以满足目前的主要需求，但是我在项目中出现了以上问题，求助。
