问题:用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中…
如图所示:
实际效果图:
话不多说,直接上代码
1、html代码:
<view class="img-box"><view class="imgs" wx:for="{{imgList}}" wx:key='id'><image src="{{item.imgurl}}" bindtap="clickImg" data-url="{{item.imgurl}}" /></view></view>
2、js代码:
data: {// 模拟图片数组imgList:[{id:1,imgurl:'/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg'},{id:2,imgurl:'/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg'},{id:3,imgurl:'/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg'},{id:4,imgurl:'/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'},{id:5,imgurl:'/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg'},{id:6,imgurl:'/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'},],}// 点击查看图片clickImg(e){console.log(e,'图片路径')let url = e.currentTarget.dataset.url;console.log([url],'数组')wx.previewImage({current: url, // 当前显示图片的http链接urls: [url] // 需要预览的图片http链接列表})}
记住一定要是http
链接图片,本地图片和 https 链接的图片无法显示