problem description

vue
want to use vue-awesome-swiper to view photo albums in the vue project. During the test, it is found that there is no problem with gesture zooming when using the written image src, but if the image src collection is changed to get and then assign values from the background, gesture zooming will not work. I don"t know why.

the data obtained by the vue template,
backend has been rendered to dom. There is no problem with the test switch on the phone. Double-click to enlarge is also possible, that is, the image cannot be dragged and moved to view after zooming or double-clicking to enlarge the gesture (src is OK with the written image).

vue project dependency or version:

{
  "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"
  }
}

the environmental background of the problems and what methods you have tried

try using another image preview plug-in PhotoSwipe : PhotoSwipe , this plug-in has a good sense of experience, but the plug-in needs to know the width and height of the picture in advance, which there is no time to study yet.

related codes

/ / Please paste the code text below (do not replace the code with pictures)

<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,//swiperswiper
                    observeParents:true,//swiperswiper
                    loadPrevNext: true,
                    lazy: {
                        loadPrevNext: true,
                      },
                    lazyLoading : true,
                    lazyLoadingInPrevNext: true, // trueslideslide
                    zoom: true,
                    grabCursor: true, // trueSwiper
                    pagination: {
                        el: ".swiper-pagination"
                    },
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    }
                }
            }
        },
        //sweiper
        computed: {
            swiper() {
              return this.$refs.mySwiper.swiper;
            }
        },
        mounted () {
            //swiperswiper
            // this.swiper.slideTo(0, 1, false);    
        },
        props: {
            images: {
                required: true
            }
        },
        methods:{
            closeViewer: function(){
                this.viewImg = false;
            }
        }
 
    }
</script>
<style>
</style

what result do you expect? What is the error message actually seen?

need to implement smooth album viewing, support preloading, smooth switching, and zoom viewing of gestures in the phone.
vue-awesome-swiper "s demo can be seen to meet the current major needs, but I have the above problems in the project and ask for help.