vue中使用vue-awesome-swiper图片显示不出来

Question

<template>
  <div class="scroll">
    <swiper :options="swiperOption" ref="mySwiper">
      <!-- slides -->
      <swiper-slide v-for="(item,index) in slidePic" :key="index"><img :src="item.src" alt="">                        </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination "  slot="pagination"></div>
      <div class="swiper-button-prev swiper-button-black" slot="button-prev"></div>
      <div class="swiper-button-next swiper-button-black" slot="button-next"></div>
    </swiper> 
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'  
export default {
  name: 'HelloWorld',
  components: {  
      swiper,  
      swiperSlide  
  },  
  data () {
    return {
      slidePic :[
          {src:'../assets/banner/timg1.jpg'},
          {src:'../assets/banner/timg2.jpg'},
          {src:'../assets/banner/timg3.jpg'},
          {src:'../assets/banner/timg4.jpg'},
        ],
       swiperOption: {  
          notNextTick: true,
          //循环
          loop:true,
          //设定初始化时slide的索引
          initialSlide:0,
          //自动播放
          // autoplay:true,
          autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
          },
          // 设置轮播
          effect : 'flip',
          //滑动速度
          speed:800,
          //滑动方向
          direction : 'horizontal',
          //小手掌抓取滑动
          // grabCursor : true,
          //滑动之后回调函数
          on: {
              slideChangeTransitionEnd: function(){
                // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
              },
          },
          //左右点击
          navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
          },
          //分页器设置         
          pagination: {
              el: '.swiper-pagination',
              clickable :true
          }
        }
    }
  },
  // props:['slidePic'],
  computed: {  
    swiper() {  
      return this.$refs.mySwiper.swiper;  
    }  
  }, 
  mounted () {  

  }   
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.swiper-slide{
  height:200px;
}

</style>

图片显示不出来 不知道是不是传的不对

因为下面这样引入图片就没问题 上面的动态引入不显示

<swiper-slide ><img src="../assets/banner/timg1.jpg" alt=""></swiper-slide>
<swiper-slide ><img src="../assets/banner/timg2.jpg" alt=""></swiper-slide>
<swiper-slide ><img src="../assets/banner/timg3.jpg" alt=""></swiper-slide>
<swiper-slide ><img src="../assets/banner/timg4.jpg" alt=""></swiper-slide>

Answer 1

应该是图片路径的问题，你可以打开控制台看下图片的路径，它识别不出它的路径。
你换成那种图片链接测试下能显示出来就是路径的问题

Answer 2

还可以是public中的图片，src: './images/timg1.jpg'。

swiperList: [{
        id: 1,
        imgUrl: require('@/assets/images/swipers.jpg')
    },
    {
        id: 2,
        imgUrl: './images/swiper.jpg'
    },
]