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

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

如图所示：

实际效果图：

话不多说，直接上代码

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

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

[超详细]微信小程序使用iconfont教程及解决真机无法显示问题
1.在iconfont官网创建自己的项目选择自己需要的图标加入'购物车',然后在'购物车'页面点击添加至项目,没有项目的话点击新建项目. 2.把我的项目下载到本地,复制小程序项目中并引用我的项目入 ...
初学者笔记——微信小程序点击图片放大
微信小程序点击图片放大 wx.previewImage 官方文档的解释 PS:红色框框内要注意,需要预览的图片连接列表只支持网络连接图片,2.2.3版本以上支持云文件ID. 将图片dream.jpg上 ...
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...
微信小程序点击图片，可全屏预览图片，长按可保存可转发朋友
微信小程序官方方法:官方提供的 previewImage 方法,可点击顶部的官方链接查看直接上代码页面是一个轮播图(根据自己情况即可) 数据是服务端返的,存放在data中注意:构造要预览的图片 ...
微信小程序——焦点图可预览查看大图缩放（多张可左右滑动）带页码 loading 加载中 / https不显示图
微信小程序焦点图,可以滑动预览大图缩放微信小程序自带焦点图swiper ,但是没有页码,只有小圆点,所以要自己写 (在查看大图时遇到一个问题,安卓上查看大图部分图不显示,经排查,发现不显示的图片地址 ...
页面加载成功后调用_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单,通常的做法是在 JS 中使用 Image 对象即可,代码大致如下 var image = new Image() image. ...
基于 PHP 实现的微信小程序 pdf 文件的预览服务
知识点微信小程序预览pdf文件问题描述前段时间文库类微信小程序开发中遇到个问题,就是要在小程序中预览阿里云 OSS 中的 pdf 文件.微信官方给的方案就一个,就是把文档缓存到本地然后用资源管理 ...
微信小程序在小米手机预览头部空白了
微信小程序在手机预览出现头部空白,代码查阅后,发现app.json里"navigationBarBackgroundColor": "black",的值不能写颜 ...

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

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

最新文章

热门文章