收藏
回答

image组件的widthFix模式下,计算高度产生多位小数点,多张图片竖向排列时,出现白间隙

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

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

1、image组件的widthFix模式下,计算高度产生多位小数点;

2、多张图片竖向排列,且将其定义为“display:block”或“display:flex”时,两图片之间不时出现空白间隙;

3、小程序图片height参数中的小数点值,在未满0.5px的情况下,会向下累加;

4、当下一张图的height参数小数点累加达到或超过0.5px时,将会以1px方式渲染;

5、H5端无此现象(亲测);

6、demo项目:https://gitee.com/xuwenqian3146179006/bugdemo.git


 <image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202107/3f63d4ce20c142b4a547383a18688f16.jpg'" mode="widthFix" />  
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/287f83251c2a48b3b2f3e3e7bc11b52f.jpg'" mode="widthFix" />  
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/04a4c48aa14646768039e7be299a71f9.jpg'" mode="widthFix" />  
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/185067658d1e40b59b2b8fa8a75142a6.jpg'" mode="widthFix" />  
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/922c0fd2ec0e4681a488191eb1372746.jpg'" mode="widthFix" />  
<image :style="'display:block;vertical-align: bottom;width:100%;height:1px;'" :src="'https://www.i-xiaohaibao.com/file/202108/d431fe9b16a8403fab1cbf00953f99bf.jpg'" mode="widthFix" />
最后一次编辑于  2021-08-30
回答关注问题邀请回答
收藏

3 个回答

  • 徐一淇
    徐一淇
    2021-08-31

    1、取巧的方案:给每张图片添加:“margin-top:-0.5px;”

    ---- 方案来源于uniapp的mp-html插件作者提供

    2021-08-31
    有用 2
    回复 2
    • King超
      King超
      2021-11-17
      有用
      2021-11-17
      回复
    • 🍇             象牙白
      🍇 象牙白
      2023-07-31
      确实有用,我吃多少核桃也想不到还能这样.......
      2023-07-31
      回复
  • Kinsey
    Kinsey
    2021-09-26

    image外层再包裹view,加载完成后获取image的长宽赋予给view,可以解决这个问题。但是这个做法吧...图片较多慎用,坑的是自己....

    2021-09-26
    有用 1
    回复
  • ?、!
    ?、!
    2022-08-06

    image display: table-cell

    2022-08-06
    有用
    回复
登录 后发表内容