vue-awesome-swiper 手势缩放无效

Question

问题描述

vue
想在vue项目中使用vue-awesome-swiper实现相册查看功能，测试的时候发现使用写死的图片src 时手势缩放没有问题，但是图片src集合换到从后台获取到再赋值的，手势缩放就不起作用了，不知道是什么原因。

用的vue template,
后台获取到的数据已经渲染到dom中，手机上测试切换没有问题，双击放大也可以，就是手势缩放或者双击放大后图片不能拖拽移动查看（用写死的图片src是可以的）。

vue项目依赖或版本：

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "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>
<style>
</style

你期待的结果是什么？实际看到的错误信息又是什么？

需要实现流畅的相册查看功能，支持预加载、流畅切换以及手机中手势缩放查看。
vue-awesome-swiper 的demo里可以看到都可以满足目前的主要需求，但是我在项目中出现了以上问题，求助。