<view style="font-size:0;">
<image style="display: block;width:100%;font-size:0;" lazy-load src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg" mode="widthFix"></image>
<image style="display: block;width:100%;font-size:0;" lazy-load src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg" mode="widthFix"></image>
</view>
|
|
重现代码片段如上
正常表现：
小米机型：
关联问题https://developers.weixin.qq.com/community/develop/doc/000e0ac65bc2507123a78a8795b800?highLine=%25E5%259B%25BE%25E7%2589%2587%25E6%258B%25BC%25E6%258E%25A5%25E6%259C%2589%25E7%2599%25BD%25E7%25BA%25BF
https://developers.weixin.qq.com/community/develop/doc/00086cca390c20be50d7ba75a56c00?highline=两个图片中间有白线
更新：
https://developers.weixin.qq.com/s/vqS2mFm87Oc1已生成链接
开发工具上也有白线，只是非常细。
解决方式：
可以取巧在第二个图片添加margin-top: -1rpx;覆盖白线
问题在于你图片用了自适应后，高度变得有小数点了，上图的高度显示时图片是精准显示的，但是占位的空间不是，所以显示的时候就会出现这个问题（原因我猜测的，如果不是请纠正😂）
我这边在处理这个问题时，都是在外层套上一个view，然后在图片加载完成后，获取它调正后的大小，将可能存在小数的宽/高取整，这样就不会出现小白线的情况了（至少我这边测过的机型都没有问题了）
<viewstyle="font-size:0;"><viewstyle="width:100%;height:{{imageheight1}}px;"><imageid="image1"style="display: block;width:100%;font-size:0;"lazy-loadsrc="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg"mode="widthFix"bindload="resizeview1"></image></view><viewstyle="width:100%;height:{{imageheight2}}px;"><imageid="image2"style="display: block;width:100%;font-size:0;"lazy-loadsrc="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg"mode="widthFix"bindload="resizeview2"></image></view></view>Page({data: {imageheight1: 200,imageheight2: 200,},resizeview1:function(e) {varquery = wx.createSelectorQuery();query.select('#image1').boundingClientRect();query.exec((res) => {console.log(res[0].height);this.setData({imageheight1: parseInt(res[0].height),//抛弃小数部分})})},resizeview2:function(e) {varquery = wx.createSelectorQuery();query.select('#image2').boundingClientRect();query.exec((res) => {console.log(res[0].height);this.setData({imageheight2: res[0].height,})})},})刚刚也遇到了，网上的6种方法也试过了不管用，最后给图片加上margin-top:-1px;单位是px
这个问题貌似没法解决吧
最优解决方案：
flex布局一键搞定问题，你值得拥有
wxml
<view class="detail-box"> <image style="width: 100%;" wx:for="{{commodityInfo.detailPictures}}" src="{{item.cloudId}}" mode="widthFix"></image> </view>wxss
.detail-box{ display: flex; flex-flow: column nowrap; }试试设置包裹这些图片的那个父元素
font-size: 0;我是用浮动布局来解决这个问题的
获取图片宽高。计算宽高比。赋值image 外部view 。设置view 的background 背景为image的src
开发者工具见白线，真机预览没有复现，一切正常，小米
https://developers.weixin.qq.com/s/vqS2mFm87Oc1已生成链接
Android真机预览没见有