- 当前 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同上。
设置 image{width: 100%; height: auto;} 就可以了
也是遇到 类似这种情况,发现也给图片设置一个大概的max-height,会比用js性能好些。
图片的高度还是最好是设置一下,如果是动态的图片那就另说了,还是可以尝试下设置max-height,虽然有局限性。
对于需要变化图片src的一般都不会用mode=widthFix,体验确实不好
可是max-width属性无法在小程序中生效,估计时widthFix与之冲突,想要完美显示图片效果,还得自己对图片尺寸做到像素级的控制,这样成本太高了
是的,现在采用的就是自己控制图片大小,确实不太便捷