关于vue-awesome-swiper图片垂直显示以及不显示的问题

使用vue-awesome-swiper来写轮播图，首先npm安装
npm install vue-awesome-swiper --save
安装好后，在入口文件main.js 添加一下代码

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在需要使用轮播图的组件中

<template>
  <div>
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="">
      </swiper-slide>

      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    
    
    name: 'HomeSwiper',
    data(){
    
    
      return{
    
    
        swiperOption:{
    
    
          pagination:'.swiper-pagination',
          loop:true
        },
        swiperList:[{
    
    
          id:'0001',
          imgUrl:'http://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
        },{
    
    
          id:'0002',
          imgUrl:'http://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
        }]
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .swiper-img{
    
    
    width: 100%;

  }
  .wrapper >>> .swiper-pagination-bullet-active{
    
    
    background:#fff !important
  }
  .wrapper{
    
    
    overflow :hidden
    width:100%
    height:0
    padding-bottom :31.25%
  }
</style>

但是写完运行之后，发现图片垂直显示

解决办法，如果你安装的版本在2.6.0以上，需要手动加载css文件，我这里安装的版本是2.6.7
在main.js文件再加入一行
import 'swiper/dist/css/swiper.css‘
这样图片就会水平排放了

还有，如果使用该插件出现图片不显示的情况，在node-modules里找到vue-awesome-swiper这个包，删除，在重新npm 安装就行了