1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序点击图片预览真机无法显示的问题

微信小程序点击图片预览真机无法显示的问题

时间:2020-12-04 15:00:03

相关推荐

微信小程序点击图片预览真机无法显示的问题

问题:用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中…

如图所示:

实际效果图:

话不多说,直接上代码

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 链接的图片无法显示

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。