收藏
回答

<image>组件 mode=“widthFix” 属性图片显示闪烁的bug

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug image 客户端 6.7.3 2.4.1

- 当前 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同上。


回答关注问题邀请回答
收藏

3 个回答

  • 不晚
    不晚
    2022-06-17

    设置 image{width: 100%; height: auto;} 就可以了

    2022-06-17
    有用 2
    回复
  • 刘乐
    刘乐
    2018-11-29

    也是遇到 类似这种情况,发现也给图片设置一个大概的max-height,会比用js性能好些。

    图片的高度还是最好是设置一下,如果是动态的图片那就另说了,还是可以尝试下设置max-height,虽然有局限性。

    2018-11-29
    有用
    回复
  • 哥特式KK
    哥特式KK
    2018-11-29

    对于需要变化图片src的一般都不会用mode=widthFix,体验确实不好

    2018-11-29
    有用
    回复 2
    • 2018-11-29

      可是max-width属性无法在小程序中生效,估计时widthFix与之冲突,想要完美显示图片效果,还得自己对图片尺寸做到像素级的控制,这样成本太高了

      2018-11-29
      回复
    • 哥特式KK
      哥特式KK
      2018-11-29回复

      是的,现在采用的就是自己控制图片大小,确实不太便捷

      2018-11-29
      回复
登录 后发表内容