问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中…
如图所示:
实际效果图:
话不多说,直接上代码
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:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg'
},
{
id:2,
imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg'
},
{
id:3,
imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg'
},
{
id:4,
imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
},
{
id:5,
imgurl:'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg'
},
{
id:6,
imgurl:'http://bpic.588ku.com/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 链接的图片无法显示