微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法

微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法

wxml：

在这里插入代码片
<view class='zhanpin'>作品展示</view>
<view class='imgList'>      
  <view class='imgList-li' wx:for='{{imgArr}}'>
    <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image>
  </view>
</view>

wxss：

在这里插入代码片：
.zhanpin{
  font-family: "微软雅黑";
  font-size: 20px;
  text-align: center;
  color: gray;
}
.imgList{
  width: 100%;
}
.imgList .imgList-li{
  width: 100%;
}
.imgList .imgList-li .img{
  float: left;
  width: 46%;
  height: 300rpx;
  margin:5px;
}

js：

在这里插入代码片
Page({
  data: {
    imgArr: [
      '../images/xiangrikui.jpg',
      '../images/zuihoudewancan.jpg',
      '../images/yonghengdejiyi.jpg',
      '../images/xiangrikui.jpg',
      '../images/xiangrikui.jpg',
      '../images/xiangrikui.jpg',
      '../images/xiangrikui.jpg'
    ]
  },
  previewImg: function (e) {
    console.log(e.currentTarget.dataset.index);
    var index = e.currentTarget.dataset.index;
    var imgArr = this.data.imgArr;
    wx.previewImage({
      current: imgArr[index],     //当前图片地址
      urls: imgArr,               //所有要预览的图片的地址集合 数组形式
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  }
})

运行时是这样的：

点击图片时是这样的，图片一直加载不出来。