公告列表
公告列表
收藏
回答

多个image图片组件拼接后在某些机型（小米）中两个图片中间会出现一条白线

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug image 微信安卓客户端 7.0.8 2.9.2

<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-06
回答关注问题邀请回答
收藏

14 个回答

  • 范
    范
    2019-11-06

    问题在于你图片用了自适应后，高度变得有小数点了，上图的高度显示时图片是精准显示的，但是占位的空间不是，所以显示的时候就会出现这个问题（原因我猜测的，如果不是请纠正😂）

    我这边在处理这个问题时，都是在外层套上一个view，然后在图片加载完成后，获取它调正后的大小，将可能存在小数的宽/高取整，这样就不会出现小白线的情况了（至少我这边测过的机型都没有问题了）

    <view style="font-size:0;">
      <view style="width:100%;height:{{imageheight1}}px;">
        <image id="image1" style="display: block;width:100%;font-size:0;" lazy-load src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b999a9014c086e06c7ac4f4a02087bf40ad1cbaf.jpg" mode="widthFix" bindload="resizeview1"></image>
      </view>
      <view style="width:100%;height:{{imageheight2}}px;">
        <image id="image2" style="display: block;width:100%;font-size:0;" lazy-load src="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) {
        var query = wx.createSelectorQuery();
        query.select('#image1').boundingClientRect();
        query.exec((res) => {
          console.log(res[0].height);
          this.setData({
            imageheight1: parseInt(res[0].height),//抛弃小数部分
          })
        })
      },
     
      resizeview2: function(e) {
        var query = wx.createSelectorQuery();
        query.select('#image2').boundingClientRect();
        query.exec((res) => {
          console.log(res[0].height);
          this.setData({
            imageheight2: res[0].height,
          })
        })
      },
    })


    2019-11-06
    有用 4
    回复 5
    • ahri
      ahri
      2019-11-06
      你这个应该是可以解决一般结构的情况，只是我的图片是在富文本里面没办法改变高度😂
      2019-11-06
      赞
      回复
    • 范
      范
      2019-11-06回复ahri
      额，这么特殊的情况，我还没遇到过。。。
      2019-11-06
      赞
      回复
    • ahri
      ahri
      2019-11-06回复范
      用到富文本就有了哈哈哈
      2019-11-06
      赞
      回复
    • haiger
      haiger
      2019-11-13
      套了一层果然可以了，谢谢大佬
      2019-11-13
      赞
      回复
    • 范
      范
      2019-11-13回复haiger
      能解决问题就好了
      2019-11-13
      赞
      回复
  • A0韟邇坣-
    A0韟邇坣-
    2020-08-21

    刚刚也遇到了，网上的6种方法也试过了不管用，最后给图片加上margin-top:-1px;单位是px

    2020-08-21
    有用 1
    回复 2
    • 未开光的红领巾
      未开光的红领巾
      2021-04-26
      你这也不管用，如果我是商品详情页，带文字的。刚好卡在文字那里，就会很奇怪
      2021-04-26
      赞
      回复
    • 我爱吃烧饼
      我爱吃烧饼
      2021-11-15
      有用
      2021-11-15
      赞
      回复
  • 墨染的天空
    墨染的天空
    2019-11-06

    这个问题貌似没法解决吧

    2019-11-06
    有用 1
    回复 1
    • ahri
      ahri
      2019-11-06
      只能问下有没有办法处理咯，影响一点体验
      2019-11-06
      赞
      回复
  • 神经蛙
    神经蛙
    11-27

    怎么连个官方回答都没有啊。我也遇到这种问题了，代码复现：

    https://developers.weixin.qq.com/community/develop/doc/0006c29b3b8208dcdd7279d556c800?fromCreate=1


    11-27
    有用
    回复
  • Kelvin
    Kelvin
    07-31

    你好，解决了么？

    07-31
    有用
    回复
  • 倚楼听雨
    倚楼听雨
    2020-04-29

    最优解决方案：

    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;
}


    2020-04-29
    有用
    回复 1
    • 未开光的红领巾
      未开光的红领巾
      2021-06-03
      并没有用，ios可以，安卓是不行的。如果是商品图，存在小数一样有线
      2021-06-03
      赞
      回复
  • 神经蛙
    神经蛙
    2020-04-16

    试试设置包裹这些图片的那个父元素 

    font-size: 0;
    2020-04-16
    有用
    回复
  • 36号。
    36号。
    2020-03-23

    我是用浮动布局来解决这个问题的

    2020-03-23
    有用
    回复
  • 
    
    2019-11-07

    获取图片宽高。计算宽高比。赋值image 外部view 。设置view 的background 背景为image的src

    2019-11-07
    有用
    回复 1
    • ahri
      ahri
      2019-11-07
      你这个方法和楼上那位老哥一样的
      2019-11-07
      赞
      回复
  • 谢谢惠顾.
    谢谢惠顾.
    2019-11-06

    开发者工具见白线，真机预览没有复现，一切正常，小米

    2019-11-06
    有用
    回复 6
    • ahri
      ahri
      2019-11-06
      你是什么型号的，我测试6s和mi8都有
      2019-11-06
      赞
      回复
    • 谢谢惠顾.
      谢谢惠顾.
      2019-11-06回复ahri
      Readmi k20Pro
      2019-11-06
      赞
      回复
    • ahri
      ahri
      2019-11-06回复谢谢惠顾.
      开发工具上也有，只是很细
      2019-11-06
      赞
      回复
    • 谢谢惠顾.
      谢谢惠顾.
      2019-11-06回复ahri
      开发工具上是有的，真机上没有
      2019-11-06
      赞
      回复
    • ahri
      ahri
      2019-11-06回复谢谢惠顾.
      他是和上一张图片距离1rpx的。可能你那个手机的1rpx不够一像素
      2019-11-06
      赞
      回复
    查看更多(1)

正在加载...

请 登录 后发表内容
相关问题
相关文档
问题标签
小米代码基础库开发工具