微信小程序cover-image手机上不显示问题

微信小程序标签cover-image，在未设置宽高的情况下，在手机上不显示，但是在微信web开发者工具上却显示。
如果我们想使图片宽高比保持一致，是图片不变形，解决方法：
在cover-image标签外放一个父容器给它设置相对定位，子元素设置绝对定位，宽，高。

 <cover-view class="img-wrap"><cover-image class="img" src="/pages/web/images/dialog.png"/></cover-view>

.img-wrap {position: relative;width: 100%;padding-top: 42.3333%;
}.img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}

问题解决！

微信小程序cover-image手机上不显示问题相关推荐

微信小程序+SpringBoot实现文件上传与下载
微信小程序+SpringBoot实现文件上传与下载 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 1.1.2 设置上传文件大小限制 1.1 ...
php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
通过微信小程序来实现线上健步走活动，统计大家的微信运动步数，函数参数（Function parameters）是在函数定义中所列的名称。
<p id="demo"></p><script> var x = myFunction(7, 8); document.getElementB ...
微信小程序将引爆手机屏幕的核战争？
为何说,安卓手机上的应用市场完蛋了? 一直以来,大家都在讨论,微信小程序到底能不能被放到手机桌面. 11月18日晚,圈内都在传一张疑似微信张小龙的朋友圈截图,内容是一部安卓手机,整屏都是微信小程序,目 ...
微信小程序开发之scroll-view上拉加载数据实现
微信小程序开发之scroll-view上拉加载数据实现一.开发思路 1.使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部 https:/ ...
小程序图片上传php后台,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
php 点击选择图片上传,微信小程序图片选择、上传到服务器、预览（PHP）实现实例...
微信小程序图片选择.上传到服务器.预览(PHP)实现实例小程序实现选择图片.预览图片.上传到开发者服务器上后台使用的tp3.2 图片上传请求时候的header参考时可以去掉(个人后台验证权限使用 ...
微信小程序：升级版手机检测微信工具小程序源码
这是一款升级版检测工具自动检测手机真伪,序列号等等另外还可以给手机检测各项功能是否正常由于能检测的项目太多,所以大家到时候自行研究吧小编就不多做介绍另外支持多做流量主模式,比如激励视频,ba ...

微信小程序cover-image手机上不显示问题

微信小程序cover-image手机上不显示问题相关推荐

最新文章

热门文章