想给轮播图每张图都加跳转功能，搜到网上给的示例都是swiper+navigator+image标签嵌套，但是我写出来的图片无法显示（但下面的小圆点是有显示的），且跳转也不起作用。只要去掉navigator标签轮播图就正常显示正常轮播，加了之后图片就不显示了。请问怎么解决呢？

wxml:

 <view class="swiperBanner">
    <swiper indicator-dots="true" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" 
circular="true" autoplay="true" interval="5000" previous-margin="70rpx" next-margin="50rpx">      
      <swiper-item wx:for="{{banner}}" wx:key="index">
        <navigator url="{{item.imgUrl}}">
        <image class="bannerImage" src="{{item.imgSrc}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>

js:

data: {
    banner:[
     {imgSrc:"/images/temp.png",
      imgUrl:"/pages/knowledge/temperature/temperature"} ,
     {imgSrc:"/images/storage.jpg",
     imgUrl:"/pages/knowledge/storage/storage"},
     {imgSrc:"/images/color.jpg",
     imgUrl:"/pages/knowledge/colors/colors"},
     {imgSrc:"/images/chinchin.jpg",
     imgUrl:"/pages/knowledge/chinchin/chinchin"}
    ],
}

模拟器的显示：