js-vue-swipe图片放大—踩坑

Posted 2021-03-02 JunviZeng

基于photoswipe实现的vue图片预览组件

1. 安装

       npm install vue-image-swipe -D

   引用

       import Vue from ‘vue‘
       import VueImageSwipe from ‘vue-image-swipe‘
       import ‘vue-image-swipe/dist/vue-image-swipe.css‘
       Vue.use(VueImageSwipe)

   使用

   <template>
       <div>
         hello world
         <div>
           <ul>
             <li
               :key="index"
               @click="preview(index)"
               v-for="(l, index) in images">
                <img :src="l" >
             </li>
           </ul>
         </div>
       </div>
       </template>
       <script>
       export default {
         name: ‘app‘,
         data() {
           return {
             images: [
               ‘http://oayhezji6.bkt.clouddn.com/preview1.jpg‘,
               ‘http://oayhezji6.bkt.clouddn.com/preview2.jpg‘,
               ‘http://oayhezji6.bkt.clouddn.com/preview3.jpg‘,
               ‘http://oayhezji6.bkt.clouddn.com/preview9.jpg‘,
               ‘http://oayhezji6.bkt.clouddn.com/preview10.jpg‘,
               ‘http://oayhezji6.bkt.clouddn.com/preview6.jpg‘
             ]
           }
         },
         created() {
         },
         methods: {
           preview(index) {
             this.$imagePreview({
               images: this.images,
               index: index,
             })
           }
         }
       }
       </script>

   上面是官方给的文档例子，可是关于this.$imagePreview中的images官方的解释为：图片的url数组

   可是却没有说明一个坑：当传递到的images图片的url链接没有在页面进行加载的时候(没有使用img标签引用)，那么第一次调用$imagePreview会导致图片无法显示

   解决方案：
   将 images数组的url数组进入页面的时候，使用img标签提前进行预加载，加上css display:none不显示即可