获取图片宽高。计算宽高比。赋值image 外部view 。设置view 的background 背景为image的src
多个image图片组件拼接后在某些机型(小米)中两个图片中间会出现一条白线[代码]<[代码][代码]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;覆盖白线
2019-11-07不使用mode。自主设置width,只要当前width 的值有小数。就会出现这个问题。比如750,image宽度为375.。显示187.5就会出现这个问题
view容器里两个image并列显示。中间会出现1px间距?[图片] <view class="imgRow"> <image src="http://photocdn.sohu.com/20120323/Img338614056.jpg" mode="widthFix" style="width:100%" /><image src="http://photocdn.sohu.com/20120323/Img338614056.jpg" mode="widthFix" style="width:100%" /> </view> .imgRow{ width:100%; display: flex; font-size: 0; background: red; } .imgRow image{ display: block; width: 100%; }
2019-11-07