uni-image功能组件使用时出现1px白边问题

ikdeer commented 2 years ago

问题描述 uni-image功能组件在使用时出现白边； 1、父级使用flex布局，使图片排列在一排不换行； 2、设置子级image的mode="widthFix“； 3、设置多张不同宽度的图片； 4、当多张图片撑满整个容器时，改变视图容器的宽度，刷新浏览器；

预期结果 图片正常铺满容器 实际结果 偶尔情况下图片当中的某一张图片右边出现白边，大约1px

系统信息:

发行平台: [H5平台]
操作系统 [如 iOS、Android、chrome]
uni-app uni-app v2.8.12

[根据你的分析，出现这个问题的原因可能在哪里？] 源码： ` <div ref="content" :style="style" />

<v-uni-resize-sensor
  v-if="mode === 'widthFix' || mode === 'heightFix'"
  ref="sensor"
  @resize="_fixSize()"
/>

` uni-image图片组件ref="content"使用了背景图的方式展示图片； style样式中设置了'background-repeat': 'no-repeat'; 使用flex布局后，背景图并没有撑满image的整个容器，导致出现1px的白边；把背景图设置成'background-repeat': 'initial';时可以解决出现的白边。具体是否是这个原因导致的白边有待进一步的验证；

StrivingRabbit commented 2 years ago

是跑在什么浏览器上出现的问题？

ikdeer commented 2 years ago

是跑在什么浏览器上出现的问题？ chrome，Android都会出现

StrivingRabbit commented 2 years ago

@ikdeer 能否提供一个示例项目

ikdeer commented 2 years ago

@ikdeer 能否提供一个示例项目 https://proshop.maanjishu.cn/web/?cid=IJsiF1msTDhpiOO6VJ 打开这个网址，浏览器模拟移动端，第一个风景图是多张图拼接起来的，element中吧.magic-cube1 .img div的background-repeat样式清除，就会出现白边，换多中尺寸的模拟器，出现的白边大小不一样；

dcloudio / uni-app

uni-image功能组件使用时出现1px白边问题 #2851