其他分享
首页 > 其他分享> > js-vue-swipe图片放大—踩坑

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

作者:互联网

基于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" alt="">
              </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不显示即可

标签:vue,http,oayhezji6,swipe,jpg,js,clouddn,images
来源: https://www.cnblogs.com/edczjw-Edison/p/12604101.html