vue-awesome-swiper 사진의 세로 표시 및 비표시에 대해

vue-awesome-swiper를 사용하여 캐러셀 지도를 작성합니다. 먼저 npm install
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 입니다
한 줄 추가 import
'swiper to the main.js file /dist/css/swiper.css'
하여 그림이 가로로 정렬되도록 합니다.

또한 이 플러그인을 사용할 때 그림이 표시되지 않으면 vue-awesome-swiper 패키지를 찾으십시오. node-modules, 삭제하고 라인의 npm에 다시 설치