收藏
回答

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

12 个回答

  • 范
    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
    有用 2
    回复 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
      回复
  • A000韟邇坣-
    A000韟邇坣-
    08-21

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

    08-21
    有用
    回复
  • 倚楼听雨
    倚楼听雨
    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;
    }
    


    04-29
    有用
    回复
  • 匿旅
    匿旅
    04-16

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

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

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

    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
    有用
    回复 1
    • ahri
      ahri
      2019-11-06
      只能问下有没有办法处理咯,影响一点体验
      2019-11-06
      回复
  • ----사랑해요
    ----사랑해요
    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)
  • ahri
    ahri
    2019-11-06

    https://developers.weixin.qq.com/s/vqS2mFm87Oc1已生成链接

    2019-11-06
    有用
    回复
  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2019-11-06

    Android真机预览没见有

    2019-11-06
    有用
    回复 1
    • ahri
      ahri
      2019-11-06
      部分机型才有问题,目前发现小米的有问题
      2019-11-06
      回复

正在加载...

登录 后发表内容
问题标签