设置 image{width: 100%; height: auto;} 就可以了
<image>组件 mode=“widthFix” 属性图片显示闪烁的bug- 当前 Bug 的表现(可附上截图) 当image的mode="widthFix",同时只给image一个宽度,image显示的时候就会有一个迅速缩小的过程(如果原图片高度大于 根据宽度widthFix之后的高度),而且原图高度远大于widthFix之后的高度时,image的这种缩小就越明显,视觉上的表现为-闪烁!这种情况下的用户体验极差。 下图是不加 mode="widthFix" 时,且只设定宽度的image的表现 [图片] [图片] [图片] 下图是加上 mode="widthFix"的表现: [图片] 事实上,当加上 mode="widthFix" 而且只给image设定宽度不设定高度,之后图片是有一个明显的缩小的过程的(高度缩小为 widthFix根据设定的宽度和原图比例而生成的高度) - 预期表现 预期表现是没有这个缩小的过程,给image设定mode="widthFix"之后,在编译过程中,编译工具根据设定的图片宽度,以及原图的横纵比自动生成一个高度并赋予给image(fixedHeight = width * ( srcHeight / srcWidth ))。这样,在编译过程中就已经生成了高度,而不是在image展现的时候才进行计算,出现一个拉伸/缩小的过程,这样不仅可以避免闪烁,而且还可以减少客户端压力。 暂时性解决方案,还是要给image标签设定一个差不多的高度,让它自己去调整,不过这样依然会有视觉上的细微变化,不够完美。 - 复现路径 复线路径上方已说明。 - 提供一个最简复现 Demo demo同上。
2022-06-17