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

50pmv0ei  于 2个月前  发布在  uni-app
关注(0)|答案(4)|浏览(37)

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

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

系统信息:

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

[根据你的分析,出现这个问题的原因可能在哪里?]
源码:
<uni-image v-on="$listeners"> <div ref="content" :style="style" /> <img :src="contentPath"> <v-uni-resize-sensor v-if="mode === 'widthFix' || mode === 'heightFix'" ref="sensor" @resize="_fixSize()" /> </uni-image>
uni-image图片组件ref="content"使用了背景图的方式展示图片;
style样式中设置了'background-repeat': 'no-repeat';
使用flex布局后,背景图并没有撑满image的整个容器,导致出现1px的白边;
把背景图设置成'background-repeat': 'initial';时可以解决出现的白边。
具体是否是这个原因导致的白边有待进一步的验证;

omvjsjqw

omvjsjqw1#

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

lokaqttq

lokaqttq2#

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

ogq8wdun

ogq8wdun3#

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

pn9klfpd

pn9klfpd4#

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

相关问题