dcloudio / dcloudio/uni-app

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

Open
#2,851 4 comments 0 reactions 1 assignee Claimed by @StrivingRabbit View on GitHub
doubleCheck 提供了复现方案
Dominant language
JavaScript
Stars
41.6k
Forks
3.7k
Avg merge
7h 6m
Merged PRs (30d)
6

Description

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

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

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

[根据你的分析,出现这个问题的原因可能在哪里?]
源码:
`




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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.